どのようにして、LIを使ってアンカーのテキストを垂直方向にセンタリングするにはCSSを使用できますか？

Question

この質問のバリエーションは何度も尋ねられています。 CSSによる垂直方向のセンタリングは課題です。

私は特定のシナリオを持ち、水平に表示されたリストを扱っています。マークアップはこのようなものです：

<ul id='ul1' class='c'> 
    <li><a href='javascript:void(0)'>Fribble Fromme</a></li> 
    <li><a href='javascript:void(0)'>Fobble</a></li> 
    <li><a href='javascript:void(0)'>Foo Fickle Pickle</a></li> 
    </ul> 

スタイルはこのようなものです：

ul.c { 
    height:52px; 
    text-align:center; 
    } 
    ul li a { 
    float:left; 
    text-decoration:none; 
    border: 1px solid Maroon; 
    padding:2px 12px; 
    background:#FFEF8A; 
    line-height:1em; 
    width:100px; 
    } 
    ul li a:hover { 
    background: #CCC; 
    } 
    ul li { 
    height:52px; 
    display:inline-block; 
    } 

結果のリストは、次のようになります。

しかし、私はすべてのボックスになりたいです同じ高さで、テキストを各ボックス内で垂直方向にセンタリングする必要があります。私はA要素のためにheightスタイルを追加することによってボックスの高さを設定することができます。

...私が欲しいものに近いですが、垂直センタリングが起きていないされている。その結果は次のようになります。

as suggested in this postのテキストには、line-heightを設定して垂直センタリングを行うことができます。複数の行のテキストを取得する要素がわかっている場合は、異なるAの要素に対して異なる値のline-heightを選択することもできます。しかし、私はどちらが複数の行を必要とするか分からない。

一部のA要素に折り返すテキストがある場合、どうやって中心に置くことができますか？

Answer 1

あなたはvertical-align:middle

ul.c { 
    text-align:center; 
    display:table; 
} 

ul li { 
    float:left;  
} 

ul li a { 
    text-decoration:none; 
    border: 1px solid Maroon; 
    padding:2px 12px; 
    background:#FFEF8A; 
    width:100px; 
    height:52px; 
    display:table-cell; 
    vertical-align:middle; 
} 

ul li a:hover { 
    background: #CCC; 
} 

例とともにdisplay:tableなどを使用することができます：あなたが同じに高さと行の高さを設定しているCSSのhttp://jsfiddle.net/kf52n/2/

Answer 2

私はCSSでこれを行う方法を考え出すことができませんでした。私はを見つけました。私はが必要です。padding-topとpadding-bottomを実行時に適切な値に設定してください。この手法は、Aエレメントの「自然な」高さを測定し、Aエレメントが垂直にセンタリングされるようにパディングを設定することです。一つは、明示的にA要素の高さやパディングを設定してはいけません、CSSで

function setHeightIntelligently(ulElement) { 
    var items, L1, i, anchor, availableHeight = ulElement.clientHeight, 
     naturalHeight, pad; 
    items = ulElement.children; 
    for(i=0, L1 = items.length;i<L1;i++){ 
     if (items[i].tagName.toUpperCase() == 'LI') { 
     anchor = items[i].children[0]; 
     naturalHeight = anchor.clientHeight; 
     pad = (availableHeight - naturalHeight)/2; 
     anchor.style.paddingTop= pad+'px'; 
     anchor.style.paddingBottom= pad+'px'; 
     } 
    } 
    } 

    function init() { 
    var element = document.getElementById('ul1'); 
    setHeightIntelligently(element); 
    } 

：

は、ここでは、必要なjsのコードです。そうすることで、「自然な」身長が私たちに必要なものにならないことになります。

アクションでそれを見るために、go here：

結果はこのようなものです。

Answer 3

。次に、長方形のボックスが表示されます。トップ下;：

しかし、まだあなたが一番下のスペースを見ていることの理由は、パディングに2つの値を加算し、パディング

によるものでは上下のパディングに

パディングを追加します

2と12のため、巨大なスペースが見えています。

この

height: 52px; 
line-height:52px; 
padding: 6px 6px; // here you have to tweak and see the output 
vertical-align:center; 

は、私はそれが

Answer 4

古い質問を働いているが、答えは今フレキシボックスで更新することができます知らせてみてください。

a { 
    height: 60px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}