Using CSS to Vertically Align Images with Text
If you have ever tried to vertically align an image with a line of text, either at the middle, bottom or top of the image, these instructions should help.
It's helpful to remember that both images and text are inline elements (which can occur within a line of text) and need different formatting than block elements like divs and paragraph tags which force the start of a new line. Some other inline elements are the <a> tag, the <cite> tag and the <span> tag.
The vertical-align property can be used to align images with text or any other inline element as well as text within table cells. It can also be used on block elements, like a Div that has been set up as "display:inline-block".
I added a border around each of the following images, which have a white background, so it's easier to see how the text aligns with the images on this page that has a white background. The border is not included in the code samples below.
How to set up Text Aligned to Bottom of Image:
First you need to set up the CSS file with this class (fell free to use your own terminology):
Then add that class to your image tag in the HTML code of your web page:
This should align the bottom of the image with the bottom of the text as shown in the image above.
Notice that the text in the example above is not actually level with the bottom of the image because the descender on the letter "g" in the word "aligned" is lower than the rest of the text. If you prefer to line the image with the bottom of the "g", then see the baseline alignment below.
If you are setting this up for mobile devices and the image is wider than 280 pixels (smallest mobile device) then leave out the width and height in the code and the browser will adjust automatically, otherwise you can leave the width and height in.
Other image postions
Text aligned to middle:
Text aligned to the top:
Text to the baseline:
Here are all 4 alignment items listed together. Just copy and paste this into your CSS file.
Other Websites with Text to Image Alignment Tips
- Aligning Inline Images with the Vertical-Align Property. This site goes into more detail on aligning images with subscript, superscript and more.
- How to Align Things in CSS This site includes alignments using Flex, working with Grids, Justify, and a lot more.
Return to HTML TIPS
© January 15, 2007
Lori's Web Design
All Rights Reserved