Question

我在span中有两个div元素，位于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;
}

它会起作用。

有什么问题？

Answer 1

问题在于这两个孩子的初始垂直对齐值baseline（参与inline-formatting context的所有元素都是如此） - 所以当增加font-size时，{ {1}}与其内联兄弟的baseline保持一致。

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

middle

Answer 2

使用垂直对齐来控制位置：

.position span  { vertical-align:middle;}