CSS: How to align HTML input checkbox and radio with text on the same line?

The common HTML form input controls of checkbox (<input type=”checkbox”>) and radio (<input type=”radio”>) can be tricky to be aligned correctly in the same line with the text or image across all modern browsers. Without any CSS styling, they usually place themselves 3 or more pixels above or below the normal text flow which look anything but nice.

Setting margin or padding won’t help, the whole line would be shifted either downward or upward. So what can be done to align the stubborn input controls nicely with the texts? You can take one of the 3 approaches to achieve this.

  1. Float the checkbox or radio to the left.
  2. Using vertical-align:middle to align the checkbox and radio in the middle with the rest of the text. It’d look much better after you have vertically aligned the controls in the middle by this, but sometimes it also helps with 1px or 2 margin manipulation.
  3. Relatively position the input tags of checkboxes and radios 1 or 2 pixels above or below its original position with
    position:relative;
    top:1px; /* or bottom:1px; */

    Which would move the control 1px downward.

Generally, the 2nd is the best of the 3 approaches.

10 comments

  1. Jae Ching

    Thanks for the tip Mr. Yang. This is just what I needed for my website.

    • Yang Yang

      Glad it helped!

  2. LK

    The second option (vertical-align:middle) does not work (in Firefox at least), but the third option (position:relative) does work. Thanks for the great tip, Mr. Yang!

  3. Ghost

    Many many thanks Yang Yang….it helps me a lot

  4. Navid

    Thanks man, its really useful. Float:left works fine on every browser

  5. Archana

    Thanks for helpful code.this workly nicely specilly for padding of inline span thats I searching from many days.

  6. elizabeth lewis

    Just what I was looking for. Many thanks!

  7. Ahsan

    mixed your approaches and worked….
    input[type=checkbox] {
    border-width:0px;
    position:relative;
    vertical-align:middle;
    bottom:1px;
    right:2px;
    }

  8. Kshitiz

    First approach worked like charm :)