Like the title says, “labels align below radio dots and check boxes.”

Its subtle, but its enough to make a page imperfect. The simple fix for this is to apply a class to the labels you wish to fix. In this example I’ll use the class “valign.”

Include the following CSS:

1
2
3
4
label.valign {
  position: relative;
  bottom: 3px;
}

The CSS will move the “valign” labels up 3 pixels. For Internet Explorer you’ll need to use 2 pixels (2px).

You can read more on browser specific CSS here.

Here is the final product:

Leave a Reply