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:

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;}

Aligning Buttons Next to Header tags

The blue buttons on the CSS tips main page next to a header tag also need some special formatting to get them to line up correctly. Vertical-align didn't work on the button image because the header is a block element. I had to set the header up as display:inline and then it worked.

Here is the class I used for those blue buttons:

.bluebtn { background-image: url(images/bluebtn.gif);
    background-repeat: no-repeat;
    width:20px;
    height:19px;
    float:left;
    margin: 0;
    padding: 0 5px 0 0; }

And here is the code that goes before each Header tag:

<div class="bluebtn"> </div>

Return to CSS TIPS

Copyright © 2007   Updated 4-12-13

Lori's Web Design
All Rights Reserved