html – 两个span元素不垂直对齐

发布时间：2020-12-14 18:43:03 所属栏目：资源来源：网络整理

导读：我在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;}.positi

我在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;
}

Live Demo

如您所见,span.yours不在中间.

如果我删除样式：

.position .name{
  font-size:28px;
}

它会工作.

有什么问题？

解决方法

问题在于两个孩子都有一个基线的初始垂直对齐值(参与 inline-formatting context的所有元素也是如此) – 所以当增加字体大小时,.yours仍然与其内联兄弟的 baseline保持一致.

在这种情况下,简单的解决方案是使用middle-fiddle覆盖初始值

.position span {
     vertical-align: middle;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!