Question

I come up against this challenge frequently — and when trying to solve I always wonder if I’m doing it wrong.

In a ‘div’, I want to position an image to the left — and some corresponding text to the right — I’d like them to appear vertically centered. What’s the best way to do this?

Currently my xhtml looks like this:

<div class="key">
 <img alt="required" src="/images/forms/asterisk.png?" /> required
</div>

Here’s how it currently looks — http://screencast.com/t/NGMxMjRmMmYt (you’ll see that the asterisk image is not vertically aligned with the “required” text. Boooo.

I typically think about positioning the image absolutely and then adding some left padding to move the text over, then later adjusting the top and bottom padding to get the text vertically centered. In the end, this approach seems like way too much work.

Answer 1

Adding this to your style should do it:

.key * {
   vertical-align: middle;
}

You’re basically saying “every element inside the key class element needs to be vertically centered”. This is the markup I follow (usually a .button class) and works in IE, Chrome, FF, Safari.