Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Align Checkbox and Its Label on Cross Browsers Using CSS
To align checkbox and its label on cross-browsers using CSS, we can use various CSS properties. Different browsers may have different styles and rendering methods while displaying checkboxes. In this article, we will be discussing three different approaches to align checkbox and its label on cross-browsers using CSS for consistent display and proper alignment.
We are having two checkboxes and two corresponding labels in this article, our task is to align checkbox and its label on cross-browsers using CSS.
Approaches to Align Checkbox and its Label on Cross Browsers
Here is a list of approaches to align checkbox and its label on cross-browsers using CSS which we will be discussing in this article with stepwise explaination and complete example codes.
- Align Checkbox and its Label using vertical-align Property
- Align Checkbox and its Label using Flexbox
- Align Checkbox and its Label using Grid
Align Checkbox and Label using vertical-align
To align checkbox and its label on cross-browsers using CSS, we will be using CSS vertical-align property which sets the vertical alignment of any element.
- We have created two checkboxes and corresponding two labels using input tag, type attribute and label tag and wrapped them inside a div container.
- We have used "input[type="checkbox"]" to select the checkbox and then used "vertical-align: middle;" to align checkbox and label.
Example
Here is a complete example code implementing above mentioned steps to align checkbox and its label on cross-browsers using CSS vertical-align Property.
<html>
<head>
<style>
input[type="checkbox"] {
vertical-align: middle;
cursor: pointer;
}
</style>
</head>
<body>
<h3>
To Align Checkbox and its Label on
Cross-Browsers using CSS
</h3>
<p>
In this example, we have used <strong>grid
</strong> properties to align checkbox and
its label on cross-browsers using CSS.
</p>
<div class="container">
<label for="demo">
<input type="checkbox" id="demo">
Option 1
</label>
<br>
<label for="demo">
<input type="checkbox" id="demo">
Option 2
</label>
</div>
</body>
</html>
Align Checkbox and its Label using Flexbox
In this approach to align checkbox and its label on cross-browsers using CSS, we have used CSS flex properties.
- We have used similar method as approach first to create two checkbox and labels.
- Then we have used label as element type selector which selects the label.
- Then, we have used flex value of CSS display property to apply flex properties such as CSS "align-items: center;" property which centers the label vertically.
- We have selected checkbox using input type selector and set "flex: none;" to make sure checkbox doesn't change it size that is grow or shrink.
Example
Here is a complete example code implementing above mentioned steps to align checkbox and its label on cross-browsers using CSS flexbox.
<!DOCTYPE html>
<html>
<head>
<style>
label {
display: flex;
align-items: center;
}
input[type=checkbox]{
flex: none;
}
</style>
</head>
<body>
<h3>
To Align Checkbox and its Label on
Cross-Browsers using CSS
</h3>
<p>
In this example, we have used <strong>flex
</strong> properties to align checkbox and
its label on cross-browsers using CSS.
</p>
<div>
<label>
<input type="checkbox">
Option A
</label>
<label>
<input type="checkbox">
Option B
</label>
</div>
</body>
</html>
Align Checkbox and its Label using Grid
In this approach, we have used CSS grid layout to align checkbox and its label on cross-browsers using CSS.
- We have used container class which uses CSS display property to turn the container to grid layout.
- Then, we have used "align-items: center;" which centers the content vertically.
- We have set right margin for checkboxes using margin-right property.
Example
Here is a complete example code implementing above mentioned steps to align checkbox and its label on cross-browsers using CSS grid.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
}
input[type="checkbox"] {
margin-right: 10px;
}
</style>
</head>
<body>
<h3>
To Align Checkbox and its Label on
Cross-Browsers using CSS
</h3>
<p>
In this example, we have used <strong>grid
</strong> properties to align checkbox and
its label on cross-browsers using CSS.
</p>
<div class="container">
<input type="checkbox">
<label>Option A</label>
<input type="checkbox">
<label>Option B</label>
</div>
</body>
</html>
Conclusion
In this article, we have discussed three different approaches to align checkbox and its label on cross-browsers using CSS which are: by using CSS vertical-align property, by CSS flexbox and by using CSS grid layout.
11K+ Views
