web-dev-qa-db-ja.com

<a>要素のテキストをCSSで垂直方向に揃える

<a>要素のテキストを垂直方向に揃える方法を誰かが説明できますか？両方のテキストが赤いボックスの中央に表示されますか？

http://jsfiddle.net/WeKtX/

これが私の[〜＃〜] html [〜＃〜]です：

<ul>
<li><a href="#">this is a link</a></li>
<li><a href="#">this is an even longer link</a></li>
</ul>

そして私の[〜＃〜] css [〜＃〜]：

li {list-style-type:none;margin:0;padding:0}
li a {width:100px;float:left;background:red;margin-right:20px;height:40px}

ポインタをありがとう

htmlcssvertical-alignment
16
michaelmcgurk

テキストを水平方向の中央に配置する場合は、次のことを試してください。

text-align: center;

テキストを垂直方向の中央に配置する場合は、次のことを試してください。

line-height: 40px; //Where 40px is the height of your parent element

行の高さを使用する場合、テキストの1行でのみ機能することに注意してください。複数行のテキストを作成する場合は、テキストの高さを指定してから、テキストでposition: absolute;を使用し、親要素でposition: relative;を使用する必要があります。

複数行の例では、次のようなものを試してみます 次のjsFiddle ：

li {
    list-style-type:none;
    margin:0;
    padding:0;
    position: relative;
    height: 60px;
    width: 200px;
    display: block;
    background:red;
}

li a {
    width:100px;
    height:40px;
    position: absolute;
    top: 50%;
    margin-top: -20px;
}
14
cereallarceny