Behrang Saeedzadeh

How to middle-align text and image in an html page

Monday, 9. April 2007, 23:08:18

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, lets 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.

Getting rid of Firefox's annoying warningsASF's Open Letter to Sun Microsystems

Comments

Anonymous # 17. June 2007, 10:06

CHELSEAA Behrang writes:

Note: This entry and its follow ups looked like to be spam, so I have deleted them.

Anonymous # 19. June 2008, 22:21

Anonymous writes:

good tip, thanks. was struggling with this too.

Anonymous # 8. November 2008, 19:38

Anonymous writes:

Finally can align an image correctly! Thanks for your support!

Anonymous # 12. November 2008, 04:23

Valamas writes:

thank you!

Hannah Fisher # 31. December 2008, 03:43

Thank you very much!

Pig Milk

Anonymous # 3. February 2009, 16:03

Anonymous writes:

Great thanks for this. So how could you align another picture on the right, and keep the text in absolute middle? so picture - text - picture.