The first timers most often encounter difficulties with vertical-align style property in CSS. This property defines the alignment of the element’s content vertically on the line. The vertical-align style property looks at everything on the current line - text and images. It then looks at the height of the text boxes or images and aligns the object with the tallest item on the line. For example, the text in this HTML would be aligned at the top of the line formed by the initial 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>

Vertical-Align Syntax

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 raises the baseline or bottom of the element by the specified amount above the baseline of the parent.
• Length: A specific length.
• Inherit: The element should have the same vertical-align setting as the parent.

Vertical-Align Examples

Standard Vertical Alignment of Text By an Image

<p>
<img src=”http://z.css.com/d/webdesign/1/0/g/K/1/verticalalignimage.gif” alt=”image” />
You will be having fun with CSS.
</p>

Effect: You will be having fun with CSS.

Subscript Vertical Alignment of Text

<p>
<img src=”http://z.css.com/d/webdesign/1/0/g/K/1/verticalalignimage.gif” alt=”image” />
<span style=”vertical-align:sub;”>You will be having</span> fun with CSS.
</p>

Effect:

You will be having fun with CSS.

Superscript Vertical Alignment of Text

<p>
<img src=”http://z.css.com/d/webdesign/1/0/g/K/1/verticalalignimage.gif” alt=”image” />
<span style=”vertical-align:super;”>You will be having </span> fun with CSS.</p>

Effect:

You will be having fun with CSS.

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;”>You will be having</span> fun with CSS.</p>

Effect:

You will be having fun with CSS.

Text-Top Alignment of Different Sized Fonts

<p style=”font-size:xx-large;”>
<img src=”http://z.css.com/d/webdesign/1/0/g/K/1/verticalalignimage.gif” alt=”image” />
<span style=”vertical-align:text-top; font-size:medium;”>You will be having</span>fun with CSS.
</p>

Effect:

You will be havingfun with CSS.

Align an Image in the Middle of the Text Baseline

<p>
<img src=”http://z.css.com/d/webdesign/1/0/g/K/1/verticalalignimage.gif” alt=”image” style=”vertical-align:middle;” />
You will be having fun with CSS.
</p>

Effect:

You will be having fun with CSS.

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

<p style=”font-size:xx-large;”>
<img src=”http://z.css.com/d/webdesign/1/0/g/K/1/verticalalignimage.gif” alt=”image” />
<span style=”vertical-align:bottom; font-size:medium;”>You will be having</span>fun with CSS.</p>

Effect:

You will be havingfun with CSS.

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

<p style=”font-size:xx-large;”>
<img src=”http://z.css.com/d/webdesign/1/0/g/K/1/verticalalignimage.gif” alt=”image” />
<span style=”vertical-align:text-bottom; font-size:medium;”>You will be having </span>fun with CSS.
</p>

Effect:

You will be having fun with CSS.

Tags: Vertical-Align Style Property in CSS