Question

I’m attempting to align the text next to the checkbox on this page, however I can’t seem to get it to work:

Here’s a link to the jsFiddle: http://jsfiddle.net/Cbmnf/8/

What I’ve tried:

• Wrapping the text in a selector called #blank_referrer .text then;
  • Applying a negative margin-top and padding-top.
  • Applying float: left; on both the checkbox and text selector, which completely ruined the display.
  • Applying display: inline-block;.
  • Applying line-height: 13px (the height of the font) to #blank_referrer.

It’s really annoying me that the checkbox isn’t vertically aligned to the centre of the capital “T” in the text.

Any edits, answers, advice would be greatly appreciated!

Answer 1

Try the following CSS definition:

#blank_referrer input[type="checkbox"] {
   display: block;
   margin: 1px 4px 0 0;
   float: left;
}

You can now tinker with the margin-top setting to get the look you want…