First time visitor? The tutorials start here.

CSS vertical-align property

The possible attributes for the “vertical-align” property are:

  • top
  • middle
  • bottom

The default position varies depending on the element.

Inside table cells (<td>), the default is the middle of the table cell. If you use top, the content inside the cell will move to the top of the cell, and bottom will move the content to the bottom of the cell.

Example:

td { vertical-align: top; }

Within a line of text, the default is the middle of the line-height for text, but images align with the bottom of the text.

If you vertically-align an image within a line of text, it would be like vertically-aligning it between two lines of lined paper. To compare:

bottom (default):

middle:

top:

img { vertical-align: middle; }

Return to the list of CSS properties

If you found this article useful, please spread the word:
Stumble it! Digg! Tweet it!



Questions or comments?

Please log in to post a comment. Sorry, but it prevents this from happening. If you're not registered yet, you can register here.