Categories
CSS & HTML Tips

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.

By Yang Yang

Hello, I'm Yang. I build online businesses that please people. Want to join in and post some useful articles on Kavoir.com? Shoot me a message.

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

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!

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

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

Comments are closed.