vertical-align

The vertical-align property is used to align inline-level elements that are positioned next to each other inside a line box.

It is also used to align content inside table cells (<td>) and elements with <a href="http://tympanus.net/codrops/css_reference/display">display</a>: table-cell.

Inline-level elements include images, text, buttons, etc. and any element with <a href="http://tympanus.net/codrops/css_reference/display">display</a>: inline or <a href="http://tympanus.net/codrops/css_reference/display">display</a>: inline-block.

Without aligning inline elements, they would normally just sit next to each other at the baseline of the line box. This means that if you have an image in line with text, the image will always be aligned with the baseline of the text. But what if you want the image to be vertically centered with respect to the text? This is one of the most common use cases for the vertical-align property—it aligns inline content vertically in different positions, depending on the value you pass to it.

The different vertical-align values align inline-level elements with respect to virtual lines inside the line box. Some of these virtual lines are relative to the line box itself, and some are relative to the text inside the line box.

For example,the top and bottom values of vertical-align will align the top and bottom edges of an inline-level element with the top and bottom edges of the line box. How far the top and bottom edges of the line box are is determined by the line-height property. If no explicit line-height is specified, the line height is determined by the all of the content inside it. Other values such as text-bottom and text-top, for example, will align an element relative to virtual lines that are directly related to the font being used.

The vertical-align can be set using either one of predefined keyword values, or using a length or percentage value.
For a list of possible values and a visual explanation of each value refer to the Values section below.

Aligning Contents of Table Cells

The vertical-align property can also be used on table cells or elements with <a href="http://tympanus.net/codrops/css_reference/display">display</a>: table-cell to align the content inside them.

In the past, the attribute valign was used on table cells (<td>) to align the content inside these cells. That attribute is now deprecated and therefore you shouldn’t be using it anymore.

The following will set the vertical alignment of all table cells <td> inside a <table>.

<table>
    <tr>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, non aliquam accusamus deleniti saepe fugiat reprehenderit inventore! Explicabo, mollitia, nulla repudiandae ullam beatae totam maxime veniam odit quidem expedita obcaecati.</td>
        <td>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, et quisquam ad provident soluta quis illum consequatur ab. Minus, incidunt, consectetur deserunt itaque nobis exercitationem doloribus! Sint non rem repellendus.
        </td>
    </tr>
</table>
                

td {
    vertical-align: top;
}
                

The following will vertically align the contents of a <div> that is set to have a display of a table-cell:

<div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, magni, nihil iure repudiandae dicta assumenda saepe cumque quas culpa soluta odit quae eligendi nam nesciunt animi rem illo voluptates quis.
</div>
                

div {
    display: table-cell;
    vertical-align: middle;
}
                

It is very important to note here that setting vertical-align: middle on the div here is used to align the content inside the div and not the div itself inside its container.

Setting the of block-level elements to table-cell is one of the tricks that are sometimes used to vertically center contents inside a block-level element. Read the following notes section for more information.

Trivia & Notes

As mentioned above, the vertical-align property is used to align inline-level (inline and inline-block) elements and table-cell elements only. So using it on a block-level element will not give you any results, unless you give that block-level element a table-cell display and then apply the vertical-align property to it.

Many beginners tend to use the vertical-align property in an attempt to vertically center elements such as paragraphs of text (which are block-level elements) or other block-level elements such as headings or divs inside other block-level containers. When they do this, they never end up with the intended result. Plus, the browser will set all the inline-level descendants of the block-level element to inherit the vertical alignment they have set on the element.

Sometimes content can be centered vertically inside a block-level element if that element is displayed as a table-cell. However, it may not always be convenient to do that—maybe your block-level element has to be displayed as is or your layout might get messed up. Plus, as we mentioned earlier, using vertical-align on an element with display: table-cell will align the content inside that element, and not the element itself inside its parent container.

Vertically aligning block-level elements has been one of the holy grails of CSS, since there is no standard way to do this. Many articles have been written showcasing techniques to center block-level elements vertically. You can read about the different techniques in the following recommended articles:

• 6 Methods for Vertical Centering with CSS
• Vertical Centering with CSS
• Absolute Horizontal and Vertical Centering in CSS