字母 X — CSS 举足轻重的角色
- 字母 x 的下边缘是基线
- x-height:就是字母 x 的高度,基线和等分线之间的距离
line-height
- div 高度是由 line-height 决定的。
- 非替换元素的纯内联元素,可视高度完全由 line-height 决定。与 padding、border 属性没有关系。
vertical-align
- 设置 vartical-align 为正值相对基线上移,负值相对基线下移。
- vertical-align 的百分比是相对于 line-height 计算的。
- vertical-align 只能作用于内联元素和 display 为 table-cell 的元素。
- table-cell 元素设置 vartical-align 垂直居中对齐的是子元素,但是其作用的不是子元素,而是 table-cell 元素自身。就算 table-cell 元素的子元素是一个块级元素,也一样能让其有各种垂直对齐的表现。
线性类属性值
inline-block 与 baseline
vertical-align 默认 baseline,内联元素就是字符 x 的下边缘,对于替换元素则是替换元素的下边缘。对于 inline-block 元素,如果里面没有内联元素,或者 overflow 不是 visible 的元素,则该元素的基线是其 margin 底边缘;否则其基线就是元素里面最后一行内联元素的基线。
vertical-align: top/bottom
vertical-align: top 就是垂直上边缘对齐,具体定义如下:
- 内联元素:元素的底部和当前行框盒子的顶部对齐。
- table-cell 元素:元素底 padding 边缘和表格行的顶部对齐。
vertical-align: bottom 就是下边缘对齐。
vertical-align: middle 与近似垂直居中
- 内联元素:元素的垂直中心点和行框盒子基线往上 1/2 x-height 除对齐。
- table-cell 元素:单元格填充盒子相对于外面的表格行居中对齐。
文本类属性值
- vertical-align:text-top:盒子的顶部和父级内容区域的顶部对齐。
- vertical-align:text-bottom:盒子的底部和父级内容内容区域的底部对齐。
上下标属性
- vertical-align:super:提高盒子的基线到父级合适的上标基线位置。
- vertical-align:sub:降低盒子的基线到父级合适的下标基线位置。
基于 vertical-align 属性的水平居中弹框
<div class="container">
<div class="dialog"></div>
</div>
.container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, .5);
text-align: center;
font-size: 0;
white-space: nowrap;
overflow: auto;
}
.container::after {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.dialog {
display: inline-block;
vertical-align: middle;
text-align: left;
font-size: 14px;
white-space: normal;
}
参考
【1】CSS 世界@张鑫旭