Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Vertical Align an Element

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.


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


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).

<img src="red.gif">TEXT<img style="vertical-align:bottom;" src="green.gif">


Align vertical midpoint of the element with the line's baseline plus half the the height of the letter "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">

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2024 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268