Html checkbox vertical align

We have several CSS techniques and practices to ensure proper alignment of checkboxes and labels across different platforms. Some of them are discussed below.

Styling the Checkbox Using Vertical-align

Using display and vertical align property together, we can align the checkbox and its label.

Example

Here, the “display: inline-block” property enables us to set the display type of the checkbox as an inline block. While the “vertical-align: middle” property will align the checkbox at the center of its container vertically.

Using both the properties will ensure that the checkbox is displayed in line with other elements and aligned at the middle of the line. Hence, the checkbox and its label will be aligned on the same line, keeping the text of the label centrally aligned with the checkbox.

   input[type="checkbox"]  
Checkbox
 
  Option 1 
  Option 2 
   

Using the CSS Flexbox

We can make element as the flex container to align the checkbox and label.

Example

In this example, we have made the label element as a flex container by using display: flex. The align-items: center property centrally aligns the text of the label with the checkbox.

While we have used flex: none for our input element to ensure that the width of the checkbox does not change with the change in size of the label (container). Using these three properties together, makes the checkbox and label to centrally align with respect to each other.

   .container < display: flex; align-items: center; padding: 2px; >input[type=checkbox]  
Fruits
 
  Mango 
  Banana 
   

Using Vertical-align Property

The checkbox is by default aligned to the baseline of the text of the label in some modern browsers. However, to ensure their proper alignment we can set the vertical-align property to “top” for both the label and input element.

Example

In the following example, we have displayed the label (class= «container») and the input element as inline block elements by using the “display: inline-block” property. This makes both the elements inline whose dimensions can be adjusted.

“input[type=»checkbox»]” is a selector which is used to select or match the checkbox type of input element.

Also, we have used the “vertical-align: top” property to vertically align the elements to the top of their container. Using these properties together for both label and input elements ensures that both of them are vertically aligned at the top of container and are displayed in line with respect to each other.

   .container < display: inline-block; vertical-align: top; margin-right: 15px; letter-spacing: 1px; >input[type="checkbox"]  
Programming Languages
 
  JavaScript 
  Python 
   

Using Position and Vertical-align Property

Keeping the position of the input element as relative and using vertical-align: bottom property can also align the checkboxes and labels.

Example

Here, we make the label as block element so that it takes up the full width of the container. Remove the padding and margin for the input element. vertical-align: bottom property aligns the checkbox to the bottom of the container vertically. The position property is used to align the checkbox with the label.

   CSS code * < padding: 0; margin: 0; >.container < display: block; padding-left: 20px; >input  
Programming Languages
 
 
  JavaScript 
  Python 
   

Conclusion

Web forms are fundamental component of web development which are popularly used. To make it cross-browser compatible, we should make sure that alignment of input and label element should be proper. This makes your website look consistent and professional across all browsers and devices.

Источник

How to Align a Checkbox and Its Label Consistently Cross-Browsers

The checkbox is one of the HTML forms that is used on every website.

How to align the checkbox and its label? This is a question that developers frequently ask. The problem here is that when aligning them correctly in Safari using the «baseline» value of the vertical-align property, they work, but they will not work in Firefox, and developers usually waste much time on fixing this problem. If you have such difficulty, we will show how to do it step by step.

Create HTML

form> div> label> input type="checkbox" /> Label text label> div> form>

Add CSS

• Set the vertical-align property to “bottom”, which is consistent across browsers.
• Set the position property to “relative” to place the element relative to its normal position.

label < display: block; padding-left: 15px; text-indent: -15px; > input < width: 15px; height: 15px; padding: 0; margin: 0; vertical-align: bottom; position: relative; top: -1px; >

Now, let’s see the result of our code.

Example of aligning a checkbox and its label:

html> html> head> title>Title of the document title> style> label < display: block; padding-left: 15px; text-indent: -15px; > input < width: 15px; height: 15px; padding: 0; margin: 0; vertical-align: bottom; position: relative; top: -1px; > style> head> body> form> div> label> input type="checkbox" /> Label text label> div> form> body> html>

Result

In this example, we don’t need a for attribute as we wrap the in a tag.

You can adjust the relative positioning, height, width, and so on depending on the needed text sizing.

Next, we’ll show an example where we use the for attribute.

Example of aligning a checkbox and its labels using a for attribute:

html> html> head> title>Title of the document title> style> input[type=checkbox], input[type=radio] < vertical-align: middle; position: relative; bottom: 1px; > input[type=radio] < bottom: 2px; > style> head> body> form> label> input type="checkbox" /> Label text label> br/> br/> input type="checkbox" id="myChk" /> label for="myChk">label tag with the for attribute label> form> body> html>

Example of aligning a checkbox and its labels by using the display property with the «flex» value:

html> html> head> title>Title of the document title> style> label < display: flex; align-items: center; > style> head> body> form> div> label> input type="checkbox" /> Label text label> div> form> body> html>

Источник