vertical-align Examples
Examples of How the vertical-align CSS Property Works
- Standard Vertical Alignment of Text By an Image
- Subscript Vertical Alignment of Text
- Superscript Vertical Alignment of Text
- Top Alignment of Text Beside a Taller Image
- Text-Top Alignment of Different Sized Fonts
- Align an Image in the Middle of the Text Baseline
- Align Bottom of Text (Not Including Descenders) With Baseline of Largest Font
- Align Bottom of Text (Including Descenders) With Baseline of Largest Font
Return to the vertical-align information.
Standard Vertical Alignment of Text By an Image
The quick brown fox jumped over the lazy sleeping dog.
<p>
<img src="http://z.about.com/d/webdesign/1/0/g/K/1/verticalalignimage.gif" alt="image" />
The quick brown fox jumped over the lazy sleeping dog.
</p>
Return to the vertical-align information.
Subscript Vertical Alignment of Text
The quick brown fox jumped over the lazy sleeping dog.
<p>
<img src="http://z.about.com/d/webdesign/1/0/g/K/1/verticalalignimage.gif" alt="image" />
<span style="vertical-align:sub;">The quick brown fox</span> jumped over the lazy sleeping dog.
</p>
Return to the vertical-align information.
Superscript Vertical Alignment of Text
The quick brown fox jumped over the lazy sleeping dog.
<p>
<img src="http://z.about.com/d/webdesign/1/0/g/K/1/verticalalignimage.gif" alt="image" />
<span style="vertical-align:super;">The quick brown fox</span> jumped over the lazy sleeping dog.
</p>
Return to the vertical-align information.
Top Alignment of Text Beside a Taller Image
The quick brown fox jumped over the lazy sleeping dog.
<p>
<img src="http://z.about.com/d/webdesign/1/0/g/K/1/verticalalignimage.gif" alt="image" />
<span style="vertical-align:top;">The quick brown fox</span> jumped over the lazy sleeping dog.
</p>
Return to the vertical-align information.
Text-Top Alignment of Different Sized Fonts
The quick brown fox jumped over the lazy sleeping dog.
<p style="font-size:xx-large;">
<img src="http://z.about.com/d/webdesign/1/0/g/K/1/verticalalignimage.gif" alt="image" />
<span style="vertical-align:text-top; font-size:medium;">The quick brown fox</span> jumped over the lazy sleeping dog.
</p>
Return to the vertical-align information.
Align an Image in the Middle of the Text Baseline
The quick brown fox jumped over the lazy sleeping dog.
<p>
<img src="http://z.about.com/d/webdesign/1/0/g/K/1/verticalalignimage.gif" alt="image" style="vertical-align:middle;" />
The quick brown fox jumped over the lazy sleeping dog.
</p>
Return to the vertical-align information.
Align Bottom of Text (Not Including Descenders) With Baseline of Largest Font
The quick brown fox jumped over the lazy sleeping dog.
<p style="font-size:xx-large;">
<img src="http://z.about.com/d/webdesign/1/0/g/K/1/verticalalignimage.gif" alt="image" />
<span style="vertical-align:bottom; font-size:medium;">The quick brown fox</span> jumped over the lazy sleeping dog.
</p>
Return to the vertical-align information.
Align Bottom of Text (Including Descenders) With Baseline of Largest Font
The quick brown fox jumped over the lazy sleeping dog.
<p style="font-size:xx-large;">
<img src="http://z.about.com/d/webdesign/1/0/g/K/1/verticalalignimage.gif" alt="image" />
<span style="vertical-align:text-bottom; font-size:medium;">The quick brown fox</span> jumped over the lazy sleeping dog.
</p>
Return to the vertical-align information.
