vertical-align
用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。
vertical-align
只对行内元素、行内块元素和表格单元格元素生效
/* 关键字 */
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;
/* 长度数值 */
vertical-align: 10em;
vertical-align: 4px;
/* 百分比 */
vertical-align: 20%;
/* 全局 */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;
vertical-align 属性可被用于两种环境:
- 使行内元素盒模型与其行内元素容器垂直对齐。例如,用于垂直对齐一行文本内的图片<img>
- 垂直对齐表格单元内容。
行内元素的值
- 这些值使元素相对其父元素垂直对齐
- baseline - 使元素的基线与父元素的基线对齐
- sub - 使元素的基线与父元素的下标基线对齐
- super - 使元素的基线与父元素的上标基线对齐
text-top -
使元素的顶部与父元素的字体顶部对齐text-bottom -
使元素的底部与父元素的字体底部对齐- middle - 使元素的中部与父元素的基线加上父元素 x-height的一半对齐
- length - 使元素的基线对齐到父元素的基线之上的给定长度。可以是负数
- percentage - 使元素的基线对齐到父元素的基线之上的给定百分比,该百分比是line-height属性的百分比,可以是负数
- 相对行的值
top
- 使元素及其后代元素的顶部与整行的顶部对齐bottom
- 使元素及其后代元素的底部与整行的底部对齐
表格元素的值
baseline
(以及sub
,super
,text-top
,text-bottom
,<length>
,<percentage>
)使单元格的基线,与该行中所有以基线对齐的其他单元格的基线对齐top
使单元格内边距的上边缘与该行顶部对齐middle
使单元格内边距盒模型在该行内居中对齐bottom
使单元格内边距的下边缘与该行底部对齐
例子
1、默认值vertical-align:baseline;
<style>
.box {
width: 500px;
height: 100px;
line-height: 100px;
background-color: aquamarine;
font-size: 40px;
}
span {
vertical-align:baseline; // 默认值为baseline
}
</style>
<div class="box">
国国
<span>国国</span>
<img src="./图库/AI.jpg" alt="" width="60px">
<span>国国</span>
</div>
此时,图片跟文字的基线对齐。
2、vertical-align:text-bottom;
<style>
.box {
width: 500px;
height: 200px;
line-height: 200px;
background-color: aquamarine;
font-size: 40px;
}
img {
vertical-align: text-bottom;
}
</style>
<div class="box">
国国
<span>国国j</span>
<img src="./图库/AI.jpg" alt="" width="60px">
<span>国国</span>
</div>
图片跟文字的底部对齐
3、vertical-align:bottom;
img {
vertical-align: bottom;
}
图片跟整行的底部对齐
4、vertical-align: middle;