LWD logoLori's Web DesignLWD logo

Using CSS to Vertically Align Images with Text




Recent Visitors.

Thanks for visiting

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

Text aligned to bottom of image:

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" class="textbottom" alt="name of image">

This should align the bottom of the image with the bottom of the text as shown in the image above.

Other image postions

Text aligned to middle of image: delphinium

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


Text aligned to top of image: delphinium

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


Text aligned to baseline: delphinium

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



Google



Return to HTML TIPS


Copyright © 2007   Updated 7-15-17

Lori's Web Design
All Rights Reserved

Twitter     Google+     Facebook     linked in