我在div中有两个span元素,在div的中间对齐.
<div class="position">
<span class="yours">Your current position：</span>
<span class="name">New York</span>
</div>
样式：
.position{
height:70px;
background-color:gray;
}
.position span{
line-height:70px;
}
.position .name{
font-size:28px;
}
如您所见,span.yours不在中间.
如果我删除样式：
.position .name{
font-size:28px;
}
它会工作.
有什么问题？
解决方法
问题在于两个孩子都有一个基线的初始垂直对齐值(参与
inline-formatting context的所有元素也是如此) – 所以当增加字体大小时,.yours仍然与其内联兄弟的
baseline保持一致.
在这种情况下,简单的解决方案是使用middle-fiddle覆盖初始值
.position span {
vertical-align: middle;
}
