我看到代码了vertical-align: -0.125em;，并思考它和vertical-align:middle?
vertical-align:middle means
将元素的中间与基线加上父级 x 高度的一半对齐
所以你需要找到middle元素的基线和 x 高度的一半（由ex unit).
这是一个例子：
.box {
font-size:50px;
background:
linear-gradient(green,green) 0 46px/100% 2px no-repeat;
}
.box > span {
display:inline-block;
width:30px;
height:30px;
background:
linear-gradient(black,black) center/100% 2px no-repeat,
linear-gradient(red,red) 0 calc(50% + 0.5ex)/100% 1px no-repeat,
yellow;
vertical-align:middle;
}
<div class="box">
Some text j <span></span>
</div>
绿线是基线，span 元素上的黑色线是中间。我们将中间偏移 x 高度的一半（红线）
vertical-align: -0.125em is vertical-align: <length> means
将元素的基线与其父元素基线上方的给定长度对齐。允许负值。
这是考虑偏移量后元素的基线相对于父元素的基线：
.box {
font-size:50px;
background:
linear-gradient(green,green) 0 46px/100% 2px no-repeat;
}
.box > span {
display:inline-block;
font-size:20px;
width:30px;
height:30px;
background:
linear-gradient(black,black) 0 18px/100% 2px no-repeat,
linear-gradient(red,red) 0 calc(18px - 0.125em)/100% 1px no-repeat,
yellow;
vertical-align:-0.125em;
}
<div class="box">
Some text j <span>aq</span>
</div>
请注意，在某些情况下，找到基线有点困难。对于空元素，基线是元素的底部：
.box {
font-size:50px;
background:
linear-gradient(green,green) 0 46px/100% 2px no-repeat;
}
.box > span {
display:inline-block;
font-size:20px;
width:30px;
height:30px;
background:
linear-gradient(red,red) left 0 bottom 0.5em/100% 1px no-repeat,
yellow;
vertical-align:-0.5em;
}
<div class="box">
Some text j <span></span>
</div>
如果元素有，它也是底部overflow:hidden
.box {
font-size:50px;
background:
linear-gradient(green,green) 0 46px/100% 2px no-repeat;
}
.box > span {
display:inline-block;
overflow:hidden;
font-size:20px;
width:30px;
height:30px;
background:
linear-gradient(red,red) left 0 bottom 0.5em/100% 1px no-repeat,
yellow;
vertical-align:-0.5em;
}
<div class="box">
Some text j <span></span> <span>aq</span>
</div>
如果我们处理图像或 SVG，它也是底部
.box {
font-size:50px;
background:
linear-gradient(green,green) 0 46px/100% 2px no-repeat;
}
.box > span {
display:inline-block;
overflow:hidden;
font-size:20px;
width:30px;
height:30px;
background:
linear-gradient(red,red) left 0 bottom 0.5em/100% 1px no-repeat,
yellow;
vertical-align:-0.5em;
}
.box > img {
vertical-align:-0.5em;
}
<div class="box">
Some text j <span></span> <span>aq</span> <img src="https://picsum.photos/id/100/30/30" >
</div>
请注意图像的对齐方式不同，因为em会考虑家长font-size 50px不像span元素会考虑自己的font-size. Use px他们将对齐相同：
.box {
font-size:50px;
background:
linear-gradient(green,green) 0 46px/100% 2px no-repeat;
}
.box > span {
display:inline-block;
overflow:hidden;
font-size:20px;
width:30px;
height:30px;
background:
linear-gradient(red,red) left 0 bottom 10px/100% 1px no-repeat,
yellow;
vertical-align:-10px;
}
.box > img {
vertical-align:-10px;
}
<div class="box">
Some text j <span></span> <span>aq</span> <img src="https://picsum.photos/id/100/30/30" >
</div>
综上所述，两者之间没有明确的关系middle and -0.125em因为两者都有不同的定义并且不使用相同的引用。在某些特定情况下，两者可能会给出相同的对齐方式，但这并不意味着它们是等效的。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
