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

Question

我在 a中有两个span元素在.divdiv

<div class="position">
    <span class="yours">Your current position：&lt;/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（与参与内联格式化上下文的所有元素一样） - 所以当增加字体大小时，保持与其内联兄弟的基线.yours对齐。

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

.position span {
     vertical-align: middle;
}

Answer 2

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

.position span  { vertical-align:middle;}

结果如下：http: //jsfiddle.net/WDfyr/3/