垂直对齐 | vertical-align
CSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。
/* 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;vertical-align属性可以在两个上下文中使用：
- 在其包含的行框内垂直对齐内联元素的框。例如，它可以用来在一行文本中垂直对齐
<img>：
- 垂直对齐表格中单元格的内容：
请注意，vertical-align只适用于内联和表格元素：不能用它来垂直对齐块级元素。
初始值 | baseline |
|---|---|
适用元素 | inline-level and table-cell elements. It also applies to ::first-letter and ::first-line. |
是否是继承属性 | no |
Percentages | refer to the line-height of the element itself |
适用媒体 | visual |
计算值 | for percentage and length values, the absolute length, otherwise the keyword as specified |
Animation type | a length |
正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
该属性被指定为下面列出的关键字值之一。
取值 (对于行内(inline)元素)
大部分取值是相对于父元素来说的：
baseline元素基线与父元素的基线对齐。对于一些可替换元素，比如<textarea>， HTML标准没有说明它的基线，这意味着对其使用这个关键字，各浏览器表现可能不一样。
sub元素基线与父元素的下标基线对齐。
super元素基线与父元素的上标基线对齐。
text-top元素顶端与父元素字体的顶端对齐。
text-bottom元素底端与父元素字体的底端对齐。
middle元素中垂线与父元素的基线加上小写x一半的高度值对齐。
<length>元素基线超过父元素的基线指定高度。可以取负值。
<percentage>同 <length> , 百分比相对于line-height。
（<长度>和<百分比>允许为负值。）
以下两个值是相对于整行来说的：
top?元素及其后代的顶端与整行的顶端对齐。bottom元素及其后代的底端与整行的底端对齐。
如果元素没有基线baseline，则以它的外边距的下边缘为基线。
取值 (对于table-cell元素)
baseline(andsub,super,text-top,text-bottom,<length>, and<percentage>)与同行单元格的基线对齐。top单元格的内边距的上边缘与行的顶端对齐。middle单元格垂直居中。bottom单元格的内边距的下边缘与行的底端对齐。
可以取负值。
正式语法
baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>示例
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; }输出
规范
Specification | Status | Comment |
|---|---|---|
CSS TransitionsThe 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 | Add the <length> value and allows it to be applied to element with a display type of table-cell. |
CSS Level 1The definition of 'vertical-align' in that specification. | Recommendation | Initial definition |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 4.0 | 4.0 | 1.0 (85) |
Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|
Basic support | 1.0 | 1.0 | (Yes) | 1.0 (1.0) | (Yes) | (Yes) | 1.0 |
另见
line-height，text-align，margin
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
