HTML – How to middle-align text and image

--> (Word)

--> (Powerpoint)

--> (PDF)

--> (Epub)

From Behrang Saeedzadeh’blog:

I have done this many times but everytime I need to middle-align text and images in new projects, dayamn, my head hits the wall! Then I google for some tips and usually none of them work.

So today I put some time aside to solve this problem once and for all the time and publish the results on my weblog.

So, let’s go. Suppose that you have an image with a height of 32 pixels and you want to middle-align it next to some 12px text. Here is one possible solution:

<div style="font-size: 12px;">
	<img src="32.png" style="padding-bottom: 4px; vertical-align: middle;"/> Some 12px Text
</div>

The trick is the 4px bottom padding for the image. I came up with 4px with trial and error. Lets look at another example: aligning a 12px-height image with 12px text:

<div style="font-size: 12px;">
	<img src="12.png" style="padding-bottom: 4px; vertical-align: middle;"/> Some 12px Text
</div>

As a last example, lets middle align a 32px height image with a 64px sized text:

<div style="font-size: 64px;">
	<img src="32.png" style="padding-bottom: 12px; vertical-align: middle;"/> Some 12px Text
</div>

Note that the above examples ware tested only in an xhtml transitional page, and on IE 6, Opera, and Firefox.

Conclusion

Styling the image vertical-align: middle is not enough. Sometimes you need to fix the padding-bottom style of the image in order to middle-align text and image pixel perfect.