W3docs
en
Log in

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

Checkbox is one of HTML forms that is used on every website. This tutorial will show how to align checkboxes and their labels consistently across browsers.

Tags

The checkbox is one of the HTML form control elements 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 fixing this problem. If you have such difficulty, we will show how to do it step by step.

Create HTML

  • Create <form> and <div> elements.
  • Place “checkbox” input <span class="attribute">type</span> in the <label> element.

How to Align Checkboxes and their Labels Consistently Cross-Browsers

<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.
  • The padding-left and text-indent properties are paired to push the label text to the right while keeping the checkbox aligned to the left edge of the container.

How to Align Checkboxes and their Labels Consistently Cross-Browsers

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:

How to Align Checkboxes and their Labels Consistently Cross-Browsers

<!DOCTYPE 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>
Try it Yourself »

Result

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

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

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

Next, we’ll show an example where we use the <span class="attribute">for</span> attribute.

Example of aligning a checkbox and its labels using a <span class="attribute">for</span> attribute:

How to Align Checkboxes and their Labels Consistently Cross-Browsers

<!DOCTYPE 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>
Try it Yourself »

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

Example of aligning a checkbox and its labels using a display property with flex value:

<!DOCTYPE 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>
Try it Yourself »

Note: The flexbox approach shown above is the modern standard and is recommended for new projects due to its simplicity and consistent cross-browser behavior.