vertical-align
CSS property · 21 supported, 0 partial, 0 unsupported across 21 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 |
| Outlook for Mac | desktop | WebKit | Supported |
| Apple Mail | desktop | WebKit | Supported |
| Apple Mail iOS | mobile | WebKit | Supported |
| Yahoo Mail | webmail | Yahoo | Supported |
| Yahoo Mail Android | mobile | Yahoo | Supported |
| Yahoo Mail iOS | mobile | Yahoo | Supported |
| Samsung Mail | mobile | Samsung | Supported |
| Thunderbird | desktop | Gecko | Supported |
| HEY Mail | webmail | WebKit | Supported |
| Proton Mail | webmail | Proton | Supported |
| AOL Mail | webmail | AOL | Supported |
| Fastmail | webmail | Fastmail | Supported |
| Superhuman | desktop | Blink | Supported |
Client-by-client behaviour for vertical-align
Fully supports vertical-align (21): Gmail, Gmail Android, Gmail iOS, Outlook 365, Outlook (New), Outlook Classic, Outlook iOS, Outlook Android, Outlook for Mac, Apple Mail, Apple Mail iOS, Yahoo Mail, Yahoo Mail Android, Yahoo Mail iOS, Samsung Mail, Thunderbird, HEY Mail, Proton Mail, AOL Mail, Fastmail, 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 21 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.