vertical-align

Overview

The vertical-align property is utilized for aligning inline, inline-block, inline-table, and table cell elements vertically within a line or table row. It's not applicable to block-level elements, nor is it used for vertically centering an element within another element. For centering purposes, Flexbox or Grid layouts are recommended.

Examples and Usage

We'll provide two examples that demonstrate simple use cases of the vertical-align property. The first example focuses on the vertical alignment of an inline element, such as an emoji, within its containing line box. Then, the second one will showcase the vertical alignment of content within table cells.

Vertical Alignment of an Inline Element Within Text

<p>Travel is his passion. <span class="emoji">🌍</span></p>

p {
  font-family: Arial, sans-serif;
}

.emoji {
  vertical-align: baseline; /* Change this value to experiment with other alignments */
}

Try different values of vertical-align, such as bottom, middle, sub, super, text-bottom, text-top, and top. Observe how the alignment of the emoji relative to the surrounding text changes with each value.

Note: This is a basic demonstration and some values create more drastic changes in the emoji's position, while others are subtler.

In addition, when specifying a length value for vertical-align, the element aligns at the given length above the baseline of the parent. If you provide a percentage value, the element aligns at the specified percentage above the baseline, with the percentage referencing the line-height.

Vertical Alignment in Table Cells

Moving on, let's use a table with various vertical-align values applied to its cells to see how the content is aligned within each cell.

<table>
  <tr>
    <td class="baseline">BASELINE</td>
    <td class="top">TOP</td>
    <td class="middle">MIDDLE</td>
    <td class="bottom">BOTTOM</td>
    <td>
      <p>
        Web Reference is the place where you can learn to code.
        The Web's original (created in 1995!) and one of the most respected web development resources. Learn how to build for the Web, and have some fun.
      </p>
    </td>
  </tr>
</table>

table {
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

table,
th,
td {
  border: 1px solid grey;
}

td {
  padding: 1em;
  font-family: "Gill Sans", sans-serif;
}

.baseline {
  vertical-align: baseline;
}

.top {
  vertical-align: top;
}

.middle {
  vertical-align: middle;
}

.bottom {
  vertical-align: bottom;
}

In the table, the cell with the text "BASELINE" aligns its content to the baseline of the parent, creating a consistent alignment with the surrounding text. The "TOP" cell aligns its content to the top edge of the cell, positioning it at the highest point within the cell's boundary. The "MIDDLE" cell centers its content vertically, balancing it between the top and bottom edges of the cell. Finally, the "BOTTOM" cell aligns its content to the bottom edge of the cell, placing it at the lowest point within the cell's boundary.

Values

The vertical-align property accepts several values that define the vertical alignment of elements. They can be categorized into parent-relative, line-relative, and values for table cells.

Parent-relative Values

Line-relative Values

Values for Table Cells

Associated Properties

• line-height
• text-align
• margin

Tips and Tricks

• Use vertical-align: middle to vertically center an inline element with respect to the text line.

• Be aware that vertical-align doesn't work with block-level elements. Consider using Flexbox or Grid for centering block-level elements.

• Use vertical-align: top or vertical-align: bottom to align an inline image with the top or bottom of the text line, respectively.

• Combine vertical-align with a percentage or length value to fine-tune the alignment of an inline element.

• Remember that the property is primarily used with table cells and inline elements, not for the general vertical alignment of elements within a container.

Browser Compatibility

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers (see more in the Useful Resources below)

Useful Resources

Can I use - vertical-align

W3C CSS 2.1 Specification - vertical-align

Understanding vertical-align