Read more

How to make a single check box (or image, etc) align vertically

Arne Hartherz
August 12, 2011Software engineer at makandra GmbH

Consider this HTML:

<div style="line-height: 42px">
  <input type="checkbox" />
</div>
Illustration book lover

Growing Rails Applications in Practice

Check out our e-book. Learn to structure large Ruby on Rails codebases with the tools you already know and love.

  • Introduce design conventions for controllers and user-facing models
  • Create a system for growth
  • Build applications to last
Read more Show archive.org snapshot

Even though the surrounding container defines a line-height, which vertically centers its inline elements, the check box will be top aligned if it is the only element inside the container.

It will be aligned correctly if the HTML looks like this:

<div style="line-height: 42px">
  <input type="checkbox" /> foo
</div>

Complex explanation here.

So the actual fix is to add some inline elements next to the check box. You could use a non-breaking space left and/or right of it -- keep in mind that you can use our nbsp helper instead of ugly &nbsp; entities.

This happens across all browsers and applies to other elements as well, e.g. img tags.

Posted by Arne Hartherz to makandra dev (2011-08-12 16:35)