LWD logoLori's Web DesignLWD logo

Using CSS to Vertically Align Images with Text


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:

Text aligned to bottom of image: delphinium

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

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

Then add that class to your image tag:

<img src="images/NAME-OF-IMAGE.gif" width="90" height="14" border="0" class="textbottom" alt="name of image">

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: delphinium

CSS:   .textmiddle {vertical-align:middle;}


Text aligned to the top of the image: delphinium

CSS:   .texttop {vertical-align:top;}


Text aligned to baseline: delphinium

CSS:   .textbaseline {vertical-align:baseline;}

Return to CSS TIPS



Google
Follow Me on Pinterest



Copyright © 2007   Updated 10-22-13

Lori's Web Design
All Rights Reserved

Twitter     My blog     Google+     Wordpress blog     Facebook     linked in