vertical-align
Vertical alignment of an inline element within a line, or of content in a table cell.
Syntax
vertical-align: value;Values
| Parameter | Type | Description |
|---|---|---|
| baseline | keyword | On the text baseline (the default). |
| middle | keyword | In the middle of the line or cell. |
| top | bottom | keyword | To the top or bottom edge. |
| sub | super | keyword | Lowered or raised, like an index or a power. |
Examples
An icon next to text:
<style>
img { width: 40px; }
</style>
<p><img src="/media/photo-200x200.jpg" alt=""> baseline (default)</p>
<p><img src="/media/photo-200x200.jpg" alt="" style="vertical-align: middle;"> middle</p>Content in table cells:
<style>
td { height: 60px; border: 1px solid gray; padding: 4px; }
</style>
<table><tr>
<td style="vertical-align: top;">top</td>
<td style="vertical-align: middle;">middle</td>
<td style="vertical-align: bottom;">bottom</td>
</tr></table>Notes
vertical-align does not work on ordinary blocks — for them use flexbox with align-items. A gap under an image inside a block comes from baseline alignment; vertical-align: middle or display: block on the image removes it.
See also
- text-align — Horizontal alignment of text and inline content inside a block.
- align-items — Aligns items across the main axis — vertically in a row.
- display — Decides how an element behaves in the flow and how it lays out its content.
Related recipes
In the tutorial
- Styling forms — How to style fields and buttons — padding and borders, the focus state, placeholder, disabled and invalid fields, accent-color and custom checkboxes with appearance: none.