CSS vertical-align attribute

The possible values for the “vertical-align” attribute 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; }

If you found this article useful, please spread the word: