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>
Advertisements

Entry filed under: See All, Text Styling. Tags: , , .

Indenting Text

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Recent Posts

Blog Stats

  • 75,627 hits

Archives


%d bloggers like this: