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

by Yang Yang on August 29, 2009

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.

Subscribe to Kavoir: blog feed

You should also read:

Jae Ching July 9, 2010 at 11:03 pm

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

Yang Yang July 9, 2010 at 11:23 pm

Glad it helped!

LK July 13, 2010 at 5:26 am

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!

Ghost September 15, 2010 at 9:47 pm

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

Navid January 21, 2011 at 5:56 am

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

Archana October 4, 2011 at 2:54 pm

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

elizabeth lewis November 14, 2011 at 2:47 am

Just what I was looking for. Many thanks!

Claudio Hernandez January 20, 2012 at 9:56 pm

Great, still helpful ! Tks!

Ahsan October 2, 2012 at 5:23 pm

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

Kshitiz January 18, 2013 at 4:24 am

First approach worked like charm :)

Comments on this entry are closed.

Previous post:

Next post: