maxdesign.com.au

Published:

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).

Sample of text with inline image

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

Sample text showing top line in red

2. text-top line - top of the text including all accent marks

Sample text showing text-top in red

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:

Sample text showing top and text-top

3. middle line - the vertical middle of the x-height (the height of a letter x)

Sample text showing middle line in red

4. baseline - an imaginary line on which all letters sit

Sample text showing baseline in red

5. text-bottom line - the bottom of all text including descenders (letters such as "j", "y", "g" etc)

Sample text showing text-bottom in red

6. bottom line - the bottom line below all content

Sample text showing bottom line in red

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.

Sample text showing margin pushing image up from 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.

The top value

The top of the image will align with the top line.

img.class-name {
  vertical-align: top;
}

Sample text showing image aligned to top

The text-top value

This will align the top of the image with the text-top line.

img.class-name  {
  vertical-align: text-top; 
}

Sample text showing image aligned to text-top

The middle value

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

Sample text showing image aligned to middle

The baseline value

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

Sample text showing image aligned to baseline

The text-bottom value

This will align the bottom of the image with the text-bottom line.

img.class-name {
  vertical-align: text-bottom;
}

Sample text showing image aligned to text-bottom

The bottom value

The bottom of the image will align with the bottom line.

img.class-name {
  vertical-align: bottom;
}

Sample text showing image aligned to bottom

The sub value

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

Sample text showing image aligned to sub

The super value

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

Sample text showing image aligned to super

Using a percentage value

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

Sample text showing image aligned with positive percentage

img.class-name {
  vertical-align: -30%;
}

Sample text showing image aligned with negative percentage

Using a length value

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

Sample text showing image aligned with positive pixels

img.class-name {
  vertical-align: -2px;
}

Sample text showing image aligned with negative pixels

So, what about you... Do you find vertical-align useful? Do you use it to align images within content?