Vertically Aligning Inline Images Inside of a Paragraph

By Zedric Myers | Published December 14, 2012 | Categories: Cascade CMS

By default any inline image will align with the baseline of the paragraph, unless a “margin-bottom” is applied to the paragraph’s baseline.

There are six lines that can be used for vertical alignment:

1. Top line is the line above all of the content.
2. Text-top line is top of the text that also includes any accent marks.
3. Middle line is the middle of the letter x-height.
4. Baseline is where all letters sit.
5. Text-bottom line is the bottom of all text that includes descenders.
6. Bottom line is below all content.

Given the above information, you can then determine how you want to change the vertical position of images in its surrounding text using the CSS “vertical-align” property. These properties can include, top, text-top, middle, baseline, text-bottom, bottom, sub, super, percentage and length.

Below are examples of each:

1. Top: img.class-name {vertical-align:top;}
2. Text-top: img.class-name {vertical-align:text-top;}
3. Middle: img.class-name {vertical-align:middle;}
4. Baseline: img.class-name {vertical-align:baseline;}
5. Text-bottom: img.class-name {vertical-align:text-bottom;}
6. Bottom: img.class-name {vertical-align:bottom;}
7. Sub: (aligns with the baseline position of subscript content) img.class-name {vertical-align:sub;}
8. Super: (aligns with the baseline position of superscript content) img.class-name {vertical-align:super;}
9. Percentage: (0% is baseline, by raising or lowering the value it can go above or below the baseline), example 1: img.class-name {vertical-align:5%;}, example 2: img.class-name {vertical-align:-5%;}
10. Length: (0px is baseline, by raising or lowering the value it can go above or below the baseline), example 1: img.class-name {vertical-align:5px;}, example 2: img.class-name {vertical-align:-5px;}

The above information was gathered from maxdesign.