How to Vertically Align Images with Text in CSS

If you have ever tried to vertically align an image within a line of text these instructions should help.

Align images with bottom of text:

This CSS tip aligns the bottom of the image with the bottom of the text.

First you need to set up the CSS file with this class:

.textbottom {vertical-align:text-bottom;}

Then add that class to your image tag:

<img src="images/moreinfo.gif" width="90" height="14" border="0" class="textbottom" alt="portfolio more info tag">

This should align the bottom of the image with the bottom of the text.

Other image postions

Text aligned to the middle of the image:

.textmiddle {vertical-align:middle;}


Text aligned to the top of the image:

.texttop {vertical-align:top;}


Text aligned to the baseline of the image:

.textbaseline {vertical-align:baseline;}

Return to HTML TIPS

Copyright © 9-4-07   Updated 1-6-08

Lori's Web Design
All Rights Reserved