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.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

  • Create <form> and <div> elements.
  • Place “checkbox” input type in the <label> element.
<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:

<!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>

Result

In this example, we don’t need a 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 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:

<!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>

Example of aligning a checkbox and its labels by using the display property with the "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>