The vertical-align
CSS property specifies sets vertical alignment of an inline or table-cell box.
The vertical-align property can be used in two contexts:
<img>
in a line of text:Note that vertical-align
only applies to inline and table-cell elements: you can't use it to vertically align block-level elements.
/* Keyword values */ vertical-align: baseline; vertical-align: sub; vertical-align: super; vertical-align: text-top; vertical-align: text-bottom; vertical-align: middle; vertical-align: top; vertical-align: bottom; /* <length> values */ vertical-align: 10em; vertical-align: 4px; /* <percentage> values */ vertical-align: 20%; /* Global values */ vertical-align: inherit; vertical-align: initial; vertical-align: unset;
The vertical-align
property is specified as one of the values listed below.
These values vertically align the element relative to its parent element:
baseline
<textarea>
, is not specified by the HTML specification, meaning that their behavior with this keyword may vary between browsers.sub
super
text-top
text-bottom
middle
<length>
<percentage>
line-height
property. A negative value is allowed.The following values vertically align the element relative to the entire line:
top
bottom
For elements that do not have a baseline, the bottom margin edge is used instead.
baseline
(and sub
, super
, text-top
, text-bottom
, <length>
, and <percentage>
)top
middle
bottom
Negative values are allowed.
baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>
<div>An <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a default alignment.</div> <div>An <img class="top" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a text-top alignment.</div> <div>An <img class="bottom" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a text-bottom alignment.</div> <div>An <img class="middle" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a middle alignment.</div>
img.top { vertical-align: text-top; } img.bottom { vertical-align: text-bottom; } img.middle { vertical-align: middle; }
Specification | Status | Comment |
---|---|---|
CSS Transitions The definition of 'vertical-align' in that specification. | Working Draft | Defines vertical-align as animatable. |
CSS Level 2 (Revision 1) The definition of 'vertical-align' in that specification. | Recommendation | Adds the <length> value and allows it to be applied to elements with a display type of table-cell . |
CSS Level 1 The definition of 'vertical-align' in that specification. | Recommendation | Initial definition. |
Initial value | baseline |
---|---|
Applies to | inline-level and table-cell elements. It also applies to ::first-letter and ::first-line . |
Inherited | no |
Percentages | refer to the line-height of the element itself |
Media | visual |
Computed value | for percentage and length values, the absolute length, otherwise the keyword as specified |
Animation type | a length |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 1 | 12 | 1 | 4 | 4 | 1 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 1 | 18 | Yes | 4 | Yes | 1 | Yes |
line-height
, text-align
, margin
vertical-align
, or "How (Not) To Vertically Center Content"
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align