html - 2 つのスパン要素が垂直方向に整列しません

Question

の中央に配置するために、 a 内に 2 つの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

問題は、両方の子の初期の vertical-align 値が( inline-formatting contextbaselineに参加するすべての要素と同様に) であるという事実にあります。そのため、font-size を大きくしても、インラインの兄弟のベースラインに合わせたままになります。.yours

この場合の簡単な解決策は、初期値をmiddle- fiddleでオーバーライドすることです。

.position span {
     vertical-align: middle;
}

Answer 2

垂直方向の配置を使用して位置を制御します。

.position span  { vertical-align:middle;}

結果は次のとおりです。http://jsfiddle.net/WDfyr/3/