vertical-align（mozilla的在线帮助）
The vertical-align CSS property sets vertical alignment of an inline, inline-block or table-cell box.
The vertical-align property can be used in two contexts:
- To vertically align an inline element's box inside its containing line box. For example, it could be used to vertically position an
<img>in a line of text:
- To vertically align the content of a cell in a table:
Note that vertical-align only applies to inline, inline-block and table-cell elements: you can't use it to vertically align block-level elements.
Syntax
/* 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.
Values for inline elements
Parent-relative values
These values vertically align the element relative to its parent element:
baseline- Aligns the baseline of the element with the baseline of its parent. The baseline of some replaced elements, like
<textarea>, is not specified by the HTML specification, meaning that their behavior with this keyword may vary between browsers. sub- Aligns the baseline of the element with the subscript-baseline of its parent.
super- Aligns the baseline of the element with the superscript-baseline of its parent.
text-top- Aligns the top of the element with the top of the parent element's font.
text-bottom- Aligns the bottom of the element with the bottom of the parent element's font.
middle- Aligns the middle of the element with the baseline plus half the x-height of the parent.
<length>- Aligns the baseline of the element to the given length above the baseline of its parent. A negative value is allowed.
<percentage>- Aligns the baseline of the element to the given percentage above the baseline of its parent, with the value being a percentage of the
line-heightproperty. A negative value is allowed.
Line-relative values
The following values vertically align the element relative to the entire line:
top- Aligns the top of the element and its descendants with the top of the entire line.
bottom- Aligns the bottom of the element and its descendants with the bottom of the entire line.
For elements that do not have a baseline, the bottom margin edge is used instead.
Values for table cells
baseline(andsub,super,text-top,text-bottom,<length>, and<percentage>)- Aligns the baseline of the cell with the baseline of all other cells in the row that are baseline-aligned.
top- Aligns the top padding edge of the cell with the top of the row.
middle- Centers the padding box of the cell within the row.
bottom- Aligns the bottom padding edge of the cell with the bottom of the row.
Negative values are allowed.
Formal 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 |
| Computed value | for percentage and length values, the absolute length, otherwise the keyword as specified |
| Animation type | a length |
Formal syntax
baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>
Examples
Basic example
HTML
<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>
CSS
img.top { vertical-align: text-top; }
img.bottom { vertical-align: text-bottom; }
img.middle { vertical-align: middle; }
Result
Specifications
| Specification | Status | Comment |
|---|---|---|
| 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. |
Browser compatibility
Update compatibility data on GitHub
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
vertical-align |
Full support1 | Full support12 | Full support1 | Full support4 | Full support4 | Full support1 | Full support1 | Full support18 | Full support4 | Full support14 | Full support1 | Full support1.0 |
Legend
- Full support
- Full support
See also
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
