本文详细解析了CSS中vertical-align属性的四个值（top、middle、baseline、bottom）所对应的显示效果，并揭示了这些对齐方式与字体排布之间的内在联系。文中通过实例展示了不同值如何影响元素在垂直方向上的位置，特别指出middle值并非直接对齐至中线而是基线上方半个x高度的位置。
说明：粉色为顶线，蓝色为中线（和英语本有点差异），绿色为基线，红色为底线
1.vertical-align:top
2.vertical-align:middle
3.vertical-align:baseline
4.vertical-align:bottom
结论：顶线和底线是相对于中线来计算的，当line-height为0时，顶线和底线将重合，而中线是相对于基线来计算的，基线始终在中线的下方（x的底部），vertical-algin：middle并不是对其到中线而是对齐到基线以上1/2x的位置。
扫一扫
6633
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
