vertical-align
CSS property · 15 supported, 0 partial, 0 unsupported across 15 clients
vertical-align controls how inline-level and table-cell elements align relative to their baseline or container. In email, it is most often used on table cells to anchor content to top, middle, or bottom, but its inline-element behavior is one of the most misunderstood corners of CSS.
Client Support
| Client | Category | Engine | Support |
|---|---|---|---|
| Gmail | webmail | Gmail Web | Supported |
| Gmail Android | mobile | Gmail Mobile | Supported |
| Gmail iOS | mobile | Gmail Mobile | Supported |
| Outlook 365 | webmail | Outlook Web | Supported |
| Outlook (New) | desktop | Outlook Web | Supported |
| Outlook Classic | desktop | Microsoft Word | Supported |
| Outlook iOS | mobile | Outlook Mobile | Supported |
| Outlook Android | mobile | Outlook Mobile | Supported |
| Apple Mail | desktop | WebKit | Supported |
| Apple Mail iOS | mobile | WebKit | Supported |
| Yahoo Mail | webmail | Yahoo | Supported |
| Samsung Mail | mobile | Samsung | Supported |
| Thunderbird | desktop | Gecko | Supported |
| HEY Mail | webmail | WebKit | Supported |
| Superhuman | desktop | Blink | Supported |
Client-by-client behaviour for vertical-align
Fully supports vertical-align (15): Gmail, Gmail Android, Gmail iOS, Outlook 365, Outlook (New), Outlook Classic, Outlook iOS, Outlook Android, Apple Mail, Apple Mail iOS, Yahoo Mail, Samsung Mail, Thunderbird, HEY Mail, Superhuman.
When to use vertical-align in email
- Aligning small icons next to text in a navigation row using vertical-align: middle.
- Top-aligning content in side-by-side card columns so they share a consistent header row.
- Bottom-aligning footnote content in a multi-row receipt.
Rendering behaviour and edge cases
- On <td>, vertical-align maps to the valign attribute and is reliably honored across clients.
- On inline elements, vertical-align aligns to the surrounding text baseline — not the parent's box, which surprises web developers.
- Outlook on Windows sometimes ignores middle alignment when row heights are unequal across columns.
Recommended fallback strategy
Use the valign HTML attribute alongside vertical-align CSS on table cells. For inline-element alignment, prefer wrapping the content in a <td> rather than fighting baseline math.
Related Features
Test your email across all 15 clients
Preview rendering, catch CSS issues, and get actionable fixes — free.
Try Emailens FreeSupport data last updated Apr 27, 2026 · synced from caniemail.com via @emailens/engine.