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
属性指定为下面列出的值之一。
行内元素的值
相对父元素的值
这些值使元素相对其父元素垂直对齐:
baseline
-
使元素的基线与父元素的基线对齐。HTML 规范没有详细说明部分可替换元素的基线,如
<textarea>
,这意味着这些元素使用此值的表现因浏览器而异。 sub
-
使元素的基线与父元素的下标基线对齐。
super
-
使元素的基线与父元素的上标基线对齐。
text-top
-
使元素的顶部与父元素的字体顶部对齐。
text-bottom
-
使元素的底部与父元素的字体底部对齐。
middle
-
使元素的中部与父元素的基线加上父元素 x-height(译注:x 高度)的一半对齐。
<length>
-
使元素的基线对齐到父元素的基线之上的给定长度。可以是负数。
<percentage>
-
使元素的基线对齐到父元素的基线之上的给定百分比,该百分比是
line-height
属性的百分比。可以是负数。
相对行的值
下列值使元素相对整行垂直对齐:
top
-
使元素及其后代元素的顶部与整行的顶部对齐。
bottom
-
使元素及其后代元素的底部与整行的底部对齐。
没有基线的元素,使用外边距的下边缘替代。
表格单元格的值
baseline
(以及sub
,super
,text-top
,text-bottom
,<length>
,<percentage>
)-
使单元格的基线,与该行中所有以基线对齐的其他单元格的基线对齐。
top
-
使单元格内边距的上边缘与该行顶部对齐。
middle
-
使单元格内边距盒模型在该行内居中对齐。
bottom
-
使单元格内边距的下边缘与该行底部对齐。
可以是负数。
形式语法
示例
HTML
<div>An <img src="frame_image.svg" alt="link" width="32" height="32" /> image with a default alignment.</div>
<div>An <img class="top" src="frame_image.svg" alt="link" width="32" height="32" /> image with a text-top alignment.</div>
<div>An <img class="bottom" src="frame_image.svg" alt="link" width="32" height="32" /> image with a text-bottom alignment.</div>
<div>An <img class="middle" src="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 |
---|
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-vertical-align |
初始值 | baseline |
---|---|
适用元素 | inline-level and table-cell elements. It also applies to ::first-letter and ::first-line . |
是否是继承属性 | 否 |
Percentages | refer to the line-height of the element itself |
计算值 | for percentage and length values, the absolute length, otherwise the keyword as specified |
Animation type | a length |
浏览器兼容性
BCD tables only load in the browser