Aligning Inline Elements Vertically

November 30, 2009 at 8:00 am Leave a comment

The vertical-align property is meant for aligning inline elements to a common element on the same line. For example, you might want to align text to the top, middle, baseline, or bottom of larger text or image on the same line.

These are the valid property-value pairs:

vertical-align:top — Align to the top of the line. If the height of the line is taller than the common element, this location is higher than vertical-align:text-top. If the line height is the same, top and text-top are the same location.

vertical-align:text-top — Align to the top of text characters with accents such as á and Á. This location is the same whether the characters actually have accents or not.

vertical-align:middle — Align to the middle of the letter x.

vertical-align:baseline — Align to the baseline, which is the bottom of characters that do not have descenders such as the letter A.

vertical-align:bottom — Align to the bottom of the line. If the height of the line is lower than the common element, this location is lower than vertical-align:text-bottom. If the line height is the same, top and text-bottom are the same location.

vertical-align:text-bottom — Align to the bottom of the text, which includes the bottom of characters that have descenders such the letter g. This location is the same whether the characters actually have descenders or not.

Example 1

This example aligns text to the text-top, middle, baseline, and text-bottom of the common element, which is a graphic followed by large text in white with a blue background. Characters with accents and descenders are used so you can see how they align. Example 2 shows how they align with top and bottom are used in place of text-top and text-bottom.

CSS

Note that the line height (80px) t is taller than the common element (60px) , and in this e

div{border: 1px solid #00008b; font-size:60px;}
*.main{background-color: #00008b; color:#ffffff; line-height:80px;}
*.text{font-size:18px;}
*.top{vertical-align:text-top;}
*.middle{vertical-align:middle;}
*.baseline{vertical-align:baseline;}
*.bottom{vertical-align:text-bottom;}

HTML

<div>
<span class="main">
<img src="kangarooflowerthumbsmall.gif" />
ÁáxXg</span>
<span class="top text">áÁ</span>
<span class="top text">Top</span>
<span class="middle text">Middle</span>
<span class="baseline text">Baseline</span>
<span class="bottom text">Bottom</span>
</div>

Example 2

This example aligns text to the middle and baseline of the common element, which is a graphic followed by large text in white with a blue background. It also uses top and bottom to align the text to the top and bottom on the line, which is taller and lower than the common element. Characters with accents and descenders are used so you can see how they align. Notice that aligning to top and bottom align higher and lower, respectively, than text-top and text-bottom in Example 1.

CSS

div{border: 1px solid #00008b; font-size:60px;}
*.main{background-color: #00008b; color:#ffffff; line-height:80px;}
*.text{font-size:18px;}
*.top{vertical-align:top;}
*.middle{vertical-align:middle;}
*.baseline{vertical-align:baseline;}
*.bottom{vertical-align:bottom;}

HTML

<div>
<span class="main">
<img src="kangarooflowerthumbsmall.gif" />
ÁáxXg</span>
<span class="top text">áÁ</span>
<span class="top text">Top</span>
<span class="middle text">Middle</span>
<span class="baseline text">Baseline</span>
<span class="bottom text">Bottom</span>
</div>

Source Code

<html>
<head><title>Vertical Centering</title>
<style type='text/css'>
body{}
div{border: 1px solid #00008b; font-size:60px;}
*.main{background-color: #00008b; color:#ffffff; line-height:80px;}
*.text{font-size:18px;}
*.top{vertical-align:top;}
*.middle{vertical-align:middle;}
*.baseline{vertical-align:baseline;}
*.bottom{vertical-align:bottom;}
</style>
</head>
<body>

<div>
<span class="main">
<img src="kangarooflowerthumbsmall.gif" />
ÁáxXg</span>
<span class="top text">áÁ</span>
<span class="top text">Top</span>
<span class="middle text">Middle</span>
<span class="baseline text">Baseline</span>
<span class="bottom text">Bottom</span>
</div>
</body>
</html>

Entry filed under: See All, Text Styling. Tags: align inline elements, text alignment, vertical alignment.

Indenting Text

Web Design & Development Tips