css - 内側に縦中央揃え

Question

<a>タイトルのように、中央に aを内側に縦に揃えたいと思い<ul><li>ます。ここでjsfiddle

Answer 1

aの行の高さを の行の高さと一致するように変更しliます。

a {
    /*...preceding styles */
    line-height: 3em; /* Elements line-height set to match parents */
    height: 2em;
    width: 5em;     
    text-align: center;
}

また

vertical-align:middleでプロパティを設定しますa。

a{
   /*...Other styles ommitted*/
   vertical-align: middle;
}

例 http://jsfiddle.net/gvTLw/5/

Answer 2

両方の要素で高さを指定しているため、これは に追加margin-top: 0.5emすることで簡単に実現できますa。

このような

これはli、 の高さが 3em、 のa高さが 2em であるため、垂直方向の中央に表示するには、上部に 0.5 em が必要なためです。

Answer 3

ケビンの応答と同様に、アンカーに line-height を設定するinheritと、手動で値を一致させる必要なく、同じことが行われます

フィドル

Answer 4

aの高さと一致するように、要素の高さと行の高さを変更する必要がありますli。

li {
    height: 3em;
}

a {
    line-height: 3em;
    height: 3em;
}