Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

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

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

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.

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

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

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