两个span元素不垂直对齐

Question

我有两个span元素在一个

中，需要居中显示。

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

这将有效。

问题出在哪里？

- hguser

---

我看起来没问题。你使用哪个浏览器有问题？ - JohnFx

Answer 1

问题在于两个子元素的初始 vertical-align 值都是 baseline（所有参与inline-formatting context的元素都是如此） - 因此在增加字体大小时，.yours 仍然与其内联兄弟元素的 baseline 对齐。

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

.position span {
     vertical-align: middle;
}

- Adrift

---

我需要补充这个答案，实际上像span这样的内联元素中，line-height属性是无用的。 - Sunyatasattva

@Sunyatasattva：如果我移除 line-height，那么 span 就无法垂直居中对齐了。 - hguser

Answer 2

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

.position span  { vertical-align:middle;}

这是结果: http://jsfiddle.net/WDfyr/3/

- Kooki3