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. I added a border around each of these images so it's easier to see how the text aligns with the images and to separate it from the rest of the content on this page.

How to set up Text Aligned to Bottom of Image:

Text aligned to bottom: delphinium

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/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. However, notice that the text is not actually leven with the bottom of the image. If you prefer that instead, then see the baseline alignment below.

If your setting this up for mobile devices and the image is wider than 280 pixels (smallest mobile device) then leave out the width and height, otherwise you can leave it in.

Other image postions

Text aligned to middle: delphinium

.textmiddle {vertical-align:middle;}

Text aligned to top: delphinium

.texttop {vertical-align:top;}

Text to baseline: delphinium

.textbaseline {vertical-align:baseline;}

You might notice that the bottom and baseline of the image is slightly different. The baseline setting letters like a lower case "g" to hang lower than the bottom of the image, so a baseline looks like the text is exactly at the bottom of the image.

Here are all 4 alignment items listed together. Just copy and paste this into your CSS file.

.textmiddle {vertical-align:middle;}
.texttop {vertical-align:top;}
.textbaseline {vertical-align:baseline;}
.textbottom {vertical-align:text-bottom;}

Return to HTML TIPS

© 2007   Updated 1-12-19
Lori's Web Design
All Rights Reserved