Max Design

Exciting, engaging websites

  • Home
  • About
  • News
  • Articles
  • Training
  • CSS

Recent Posts

  • Links for light reading (13/10/15)
  • Links for light reading (5/10/15)
  • Links for light reading (21/8/15)
  • Links for light reading (10/8/15)
  • Links for light reading (27/7/15)

Follow

  • Twitter
  • Linkedin
  • Slideshare

Aligning inline images with the vertical-align property

October 5, 2008 by 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).

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.

Top

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

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

Sample text showing image aligned to top

Text-top

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

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

Sample text showing image aligned to 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;
}

Sample text showing image aligned to baseline

Text-bottom

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

Bottom

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

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

Sample text showing image aligned to 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;
}

Sample text showing image aligned to 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;
}

Sample text showing image aligned to 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%;
}

Sample text showing image aligned with positive percentage

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

Sample text showing image aligned with negative percentage

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

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?

Translation

  • Russian by Nickolas Loiko
  • French by Nicolas Ramz

Filed Under: Articles

Contact us

  • Facebook
  • GitHub
  • LinkedIn
  • Twitter
© 2016 Max Design

Copyright © 2022 · Parallax Pro Theme on Genesis Framework · WordPress · Log in