html - 内側に整列

Question

<a>タグを内側に配置しようとして<li>いますが、垂直に配置できます。しかし、<a>常に上部にあり、タグを垂直方向と水平方向に中央揃えにしたい<a>

画像でわかる方法。A が必要ですが、B を取得しています。

これはHTMLです

<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<ul>

そしてこれがCSS

ul {
    line-height: 85px;
}

li {
    float: left;
    height: 85px;
    line-height: 85px;
    border: 1px solid red;
}

a {
    height: 40px;
    line-height: 40px;
    width: 40px;
    display: block;
    text-align: center;
    border: 1px solid blue;
}

あなたはjsfiddleを見ることができます

http://jsfiddle.net/Mum5e/

score 3 · Accepted Answer

とを使っdisplay:table-cellてみることができvertical-align:middleます。思い出すと、これはクロスブラウザソリューションです。

このフィドルを参照してください

編集:固定幅のアンカー:フィドル

score 3 · Accepted Answer

このサイトからアプローチを試すことができます: http://phrogz.net/css/vertical-align/index.html

これを示す簡単なフィドルをまとめました：http://jsfiddle.net/Mum5e/1/

基本的に、相対的に配置された要素内の中間マーク (50%) を上に向けた絶対配置を使用することで、要素を中央に配置できます。ただし、リンクの上部ではなく、リンクの中央を 50% マークにしたいので、リンクの上部余白を変更して、高さの半分だけオフセットします。

注: リンクを絶対に変更することによりli、幅をa指定するli必要があります。

CSS:

ul {
    line-height: 85px;
}

li {
    float: left;
    height: 85px;
    width: 40px;
    line-height: 85px;
    border: 1px solid red;
    position: relative;
}

a {
    position: absolute;
    top: 50%;
    margin-top: -20px;
    height: 40px;
    line-height: 40px;
    width: 40px;
    display: block;
    text-align: center;
    border: 1px solid blue;
}

score 0 · Accepted Answer

1 つの解決策は、21 ピクセル (コンテナーの高さから、要素のボックスの高さ (この例では境界線 + 高さ) を 2 で割ったもの) を差し引いたもの) の上余白を与えることです。

もう 1 つの解決策は、85px の高さと行の高さを指定して、テキストを効果的に中央に配置しますが、要素の高さを高くすることです。

結局のところ、私はおそらく rdiazv のソリューションを選ぶでしょう。それは主に、それが最も単純で保守が容易だからです。

score 0 · Accepted Answer

まあ、私はそれで少し遊んで、これは私のために働いた：

a {
height: 40px;
width: 40px;
margin-top:22.5px;
    border: 1px solid blue;
text-decoration:none;
 }

html - 内側に整列

4 に答える 4

Related

Reference