Vertical Align an Element
By Stephen Bucaro
Use the vertical-align property to set the vertical position of an element
on a line. The vertical-align property is a bit difficult to understand. First
you must understand the difference between block elements and inline elements.
Block elements usually start on a new line and cause the element that
follows them to start on a new line. Examples of block elements are headings
<H1>, paragraphs <p>, and horizontal rules <hr>. Inline
elements usually flow one after another from left to right on a webpage.
Examples of inline elements are text, images and spans
<span>. The vertical-align property is applied to inline elements.
You must also understand the difference between baseline and bottom.
The baseline is an imaginary line that text is written on. It does not
include the space used for decenders. Examples of decenders are the
curves at the bottom of lower-case j and g. Sometimes the vertical-align
property works relative to the baseline, and other times it works relative
to the bottom, which include the space for the decenders.
Do not consider this article an authority on the vertical-align property,
because I can't find any source on the Internet that defines this property in
plain-simple English with example code and provides visual examples. But you should
be able to find the answer you need here because I DO provide code and working examples.
vertical-align:top
Align the top of the element to the top of the tallest element on the line.
 
<img src="red.gif"><img style="vertical-align:top;" src="green.gif">
vertical-align:bottom
Align the bottom of the element to the bottm of the line. (not to the baseline which does
not include the space used for decenders).
TEXT
<img src="red.gif">TEXT<img style="vertical-align:bottom;" src="green.gif">
vertical-align:middle
Align vertical midpoint of the element with the line's baseline plus half the the height of the letter "x".
X
<img src="red.gif">X<img style="vertical-align:middle;" src="green.gif">
vertical-align:baseline (default)
Align the baseline of the element with the line's baseline.
<img src="red.gif"><img style="vertical-align:baseline;" src="green.gif">
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
