行内元素在父级行框(line box)内垂直方向上对齐方式,默认是以父级行框的 baseline(基线)为参考进行对齐布局的。行内元素的样式vertical-align会控制自身如何与父级行框的进行对齐。
所以,首先要确定父级行框的基线、行内元素的baseline和行内元素的vertical-align的取值。
经过调试,总结了以下内容:
确定父级行框的基线
- 父级行框中内容区高度最高且其vertical-align的值为baseline的行内元素的baseline,即为父级行框的基线。
确定行内元素的基线
1.inline-box内容区内为空时,内容区的底部边界为基线
2.inline-box内容区内有内容(不论一行或多行内容)时,最后一行的行框的基线将作为此行内元素的基线,而这最后一行的行框,这里先叫基准行框吧
vertical-align确定行内元素相对于行框的垂直布局方式
行内元素的verital-align的默认值为:baseline,
还有其它取值:top, middle, bottom, text-top, text-bottom, super, sub
baseline: 默认取值
行内元素的baseline与父级行框的baseline对齐
middle
行内元素的baseline与基准行框的baseline - (x-height)/2 对齐
top
行内元素的顶部边界与父级行框的内容区顶部边界对齐(注意:不是padding,border的边界)
bottom
行内元素的底部边界与父级行框的内容区底部边界对齐
text-top
行内元素的内容区的顶部边界与基准行框的内容区顶部边界对齐
text-bottom
行内元素的内容区的底部边界与基准行框的内容区底部边界对齐
sub
行内元素的baseline下移到基准行框的下标位置
super
行内元素的baseline上移到基准行框的上标位置
Demo:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
</head>
<body style="margin: 20px">
<div style="background: aquamarine;font-size: 20px;position: absolute">
<label style="vertical-align: top;background: #ff41d8;">top</label>
<label style="vertical-align: bottom !important;background: #ff981e;">bottom</label>
<label style="vertical-align: baseline;background: darkgoldenrod;width: 50px;display: inline-block;overflow-wrap: break-word;">baseline</label>
<label style="background: bisque;width: 40px; display: inline-block;overflow-wrap: break-word">xxxxxxxxxxxx<span style="background: red">xxxx</span></label>
<label style="vertical-align: middle;background: rgba(136,125,255,0.71);color: white">middle</label>
<label style="font-size: 10px;vertical-align: text-top;background: #37ff42;">text-top</label>
<label style="font-size: 10px;vertical-align: text-bottom;background: #5796ff;">text-bottom</label>
<label style="font-size: 10px;vertical-align: sub;background: #dfff58;">sub</label>
<label style="font-size: 10px;vertical-align: super;background: rgba(249,255,246,0.88);">super</label>
<span style="background: #9e9e9e87; display: inline-block; position: relative;top:-1px;height: 1px; width: 100%; vertical-align: baseline; margin-left: -100%;"></span>
</div>
</body>
</html>