Aligning inline images with the vertical-align property
Date: 5 October 2008
Author: Russ Weakley
I recently received the following question:
How do you vertically position a small image inside a paragraph of text?
Answer
Let’s start with an example – a paragraph that contains a single line of text and a small image (shown as the small blue box below).
Next, we need to look at the 6 primary lines that can be used for vertical alignment.
Text lines
1. top line – the top line above all content
2. text-top line – top of the text including all accent marks
Note: The top line and “text-top” line look like they are identical. However, there are times when the top line (shown in red below) is taller that the content inside – and therefore taller than the text-top line (shown in green below). An example of this is a tall image within the line of text:
3. middle line – the vertical middle of the x-height (the height of a letter x)
4. baseline – an imaginary line on which all letters sit
5. text-bottom line – the bottom of all text including descenders (letters such as “j”, “y”, “g” etc)
6. bottom line – the bottom line below all content
Default image vertical alignment
By default, the bottom of the image will align with the baseline of the paragraph – unless the image has margin-bottom applied. Then, the bottom of the image’s margin-bottom will align with the paragraph’s baseline. In the example below, the image has been given “margin-bottom: 5px” which causes the the bottom of the image to sit 5px above the baseline.
Using CSS to change vertical alignment
You can change the vertical position of images in relation to the surrounding text using the CSS vertical-align property.
The various properties that can be used include: top, text-top, middle, baseline, text-bottom, bottom, sub, super, percentage and length.
Top
The top of the image will align with the top line.
img.class-name { vertical-align: top; }
Text-top
This will align the top of the image with the text-top line.
img.class-name { vertical-align: text-top; }
Middle
This will align the vertical midpoint of the image with the baseline of the paragraph plus half the x-height of the paragraph.
img.class-name { vertical-align: middle; }
Baseline
Although images will be vertically aligned using baseline as the default behaviour, you can also specify this using CSS.
img.class-name { vertical-align: baseline; }
Text-bottom
This will align the bottom of the image with the text-bottom line.
img.class-name { vertical-align: text-bottom; }
Bottom
The bottom of the image will align with the bottom line.
img.class-name { vertical-align: bottom; }
Sub
This will align the bottom of the image with the baseline position of subscript content (regardless of whether any subscript content is present).
img.class-name { vertical-align: sub; }
Super
This will align the bottom of the image with the baseline position of superscript content (regardless of whether any superscript content is present).
img.class-name { vertical-align: super; }
Percentage
This will raise (positive value) or lower (negative value) the image from the baseline by the specified value. The value ‘0%’ means the same as ‘baseline’. Browsers vary slightly in the way that they position percentage-based vertical alignment.
img.class-name { vertical-align: 30% }
img.class-name { vertical-align: -30% }
Length
This will raise (positive value) or lower (negative value) the image from the baseline by the specified value. The value ‘0px’ means the same as ‘baseline’.
img.class-name { vertical-align: 2px }
img.class-name { vertical-align: -2px }
So, what about you… Do you find vertical-align useful? Do you use it to align images within content?
I use it sometimes for removing the space left for text descenders when an image needs to sit flush with whatever follows it. The other time I use it is for aligning form inputs horizontally (I find if you have an image input next to a text input that vertical-align: middle lines them up well).
@John Faulds: I most often use vertical-align in the same way you describe – aligning text next to image inputs. The value I use depends on the visual effect I am after – but middle and text-bottom are ones I have used often.
I use vertical-align when aligning icons next to text (e.g icons with “descenders” that need to be aligned with the text bottom). But I didnt know about sub and super. Thanks for this great info!
@Divya: Thanks for the comment. Vertical-align is very handy when icons sit beside text – as you mention. Allows us to overwrite the default baseline position
I do not use this as much as aligning image-inputs. This may be because we are using icons in different ways? As most on my icons are decorative and do not need to be clicked directly, I generally try to place icons as background images using CSS… but again, this may be just because we are using them in different ways.
Nice breakdown of choices – I too had no idea about the sub and super positioning! Thanks for sharing.
@Joseph R. B. Taylor: Thanks for the comment. I think a lot of people are aware of top and bottom vertical-align, but superscript and subscript are far less commonly known.
This is great. My students often have problems with inline images when used for something like a branding header with a background color, and no text. There would be a bottom gap because of the descender space. This space would grow as the text size was increased. Without any actual text in the div they can’t see what is causing the gap. Setting vertical-align: bottom eliminates the gap without requiring a height value on the div. Thanks for the great explanation.
@Pat: Good to hear from you. I have had the same concerns from students I have taught too
In the case where there is a single image and no other content inside a parent (like an paragraph or div), I prefer to set the image to “display: block” instead of “vertical-align: bottom”. This forces the image to operate like a block level item and the container then wraps around the image snuggly.
It’s very useful and interesting article. It is easy for understanding even for beginner.
@Nickolas Loiko: Thanks for the feedback. It was written for beginners, so good to hear!
don’t waste your time, use position relative for this kinda things.
@ federico: There are times I prefer to use “position: relative” too. However, when you want to position something in relationship to the content around it (such as aligning an images to the bottom of the text) then vertical align can sometimes be easier.
As always, there are no perfect answers – just lots of different solutions to the one problem