The beginners most of the times bump into obstacles with CSS vertical-align style property. This one explains the content alignment of the element vertically on the line. The property looks at the whole thing on the existing line of text and images. It then looks at the height of the text boxes or images and aligns the items with the tallest item on the line. Such as, the text in this HTML would be aligned at the top of the line produced by the preliminary image:

<p>
<img src=”" style=”height:50px; width:10px; border:solid black 1px;” /> <span style=”vertical-align: top; font-size: 12pt;”>The vertical alignment in CSS…</span>
</p>

The syntax of vertical align style property is as follows:

vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit

- Baseline: Align the baseline (bottom) of the element with the baseline of the parent.
- Sub: Make the element a subscript.
- Super: Make the element a superscript.
- Top: Align the top of the element with the tallest element on the line.
- Text-top: Align the top of the element with the parent element’s font.
- Middle: Align the vertical midpoint of the element with the baseline plus half the x- height of the parent.
- Bottom: Align the bottom of the element with the lowest element on the line.
- Text-bottom: Align the bottom of the element with the bottom of the parent element’s font.
- Percentage: Refers to the value of the line-height property of the element. It elevates the baseline or bottom of the element by the particular amount above the baseline of the parent.
- Length: A specific length.
- Inherit: The element should have the same vertical-align setting as the parent.

Standard Vertical Alignment of Text By an Image

<p>
<img src=”http://z.design.com/d/webdesign/1/0/g/K/1/verticalalignimage.gif” alt=”image” />
It is an example of CSS vertical align style property.
</p>

Top Alignment of Text Beside a Taller Image

<p>
<img src=”http://z.css.com/d/webdesign/1/0/g/K/1/verticalalignimage.gif” alt=”image” />
<span style=”vertical-align:top;”> It is an example of CSS vertical </span> fun align style property.</p>

Text-Top Alignment of Different Sized Fonts

<p style=”font-size:xx-large;”>
<img src=”http://z.design.com/d/webdesign/1/0/g/K/1/verticalalignimage.gif” alt=”image” />
<span style=”vertical-align:text-top; font-size:medium;”> It is an example of CSS vertical </span> align style property.
</p>

Superscript Vertical Alignment of Text

<p>
<img src=”http://z.design.com/d/webdesign/1/0/g/K/1/verticalalignimage.gif” alt=”image” />
<span style=”vertical-align:super;”> It is an example of CSS vertical </span> align style property. </p>

Subscript Vertical Alignment of Text

<p>
<img src=”http://z.design.com/d/webdesign/1/0/g/K/1/verticalalignimage.gif” alt=”image” />
<span style=”vertical-align:sub;”> It is an example of CSS vertical </span> align style property. </p>

Align Bottom of Text (Including Descenders) With Baseline of Largest Font

<p style=”font-size:xx-large;”>
<img src=”http://z.design.com/d/webdesign/1/0/g/K/1/verticalalignimage.gif” alt=”image” />
<span style=”vertical-align:text-bottom; font-size:medium;”> It is an example of CSS vertical </span> align style property.
</p>

Align Bottom of Text (Not Including Descenders) With Baseline of Largest Font

<p style=”font-size:xx-large;”>
<img src=”http://z.design.com/d/webdesign/1/0/g/K/1/verticalalignimage.gif” alt=”image” />
<span style=”vertical-align:bottom; font-size:medium;”> It is an example of CSS vertical </span> align style property. </p>

Align an Image in the Middle of the Text Baseline

<p>
<img src=”http://z.design.com/d/webdesign/1/0/g/K/1/verticalalignimage.gif” alt=”image” style=”vertical-align:middle;” />
It is an example of CSS vertical align style property.
</p>

Tags: CSS Vertical Alignment