li内のCSS垂直配置テキスト

<li>タグから生成された固定の高さと幅のボックスの数を連続して表示しています。次に、テキストを垂直方向の中央に揃える必要があります。CSSのvertical-alignは影響しません。おそらく何か不足していますか???

私は（マージン、パディング、行の高さ）を使用したトリックを探していません。一部のテキストが長く、2行に分割されるため、これらは機能しません。

実際のコードを見つけてください：

CSSコード

ul.catBlock{
  width:960px; 
  height: 270px; 
  border:1px solid #ccc; 
}

ul.catBlock li{
  list-style: none; 
  float:left; 
  display:block; 
  text-align: center; 
  width:160px; 
  height: 100px;
}

ul.catBlock li a{ 
  display: block;  
  padding: 30px 10px 5px 10px; 
  height:60px;
}

HTMLコード

<ul class="catBlock">
 <li><a href="#">IP Phone</a></li>
 <li><a href="#">Dual SIM Switch Server</a></li>
 <li><a href="#">IP PBX</a></li>
</ul>

親の定義display: tableとし、要素自体をvertical-align: middleしてdisplay: table-cell。

line-heightテキストを垂直に配置する方法です。それはかなり標準的であり、私はそれを「ハック」とは考えていません。に追加line-height: 100pxするだけul.catBlock liで大丈夫です。

この場合ul.catBlock li a、内のすべてのテキストが内にliもあるため、代わりにに追加する必要がある場合がありますa。これを行うと奇妙なことが起こるのを私は見たので、両方を試して、どちらがうまくいくかを見てください。

何年も遅れてこの反応があっても、これに遭遇した人はただ試してみたいかもしれません

li {
    display: flex;
    flex-direction: row;
    align-items: center;
}

フレックスボックスのブラウザーサポートは、@ scottjoudryが上記の応答を投稿したときよりもはるかに優れていますが、はるかに古いブラウザーをサポートしようとしている場合は、接頭辞やその他のオプションを検討することをお勧めします。caniuse：flex

意外なことに（またはそうではありませんが）、このvertical-alignツールは実際にはこの仕事に最適です。何よりも、Javascriptは必要ありません。

次の例では、outerクラスを本文innerの中央に配置し、outerクラスをクラスの中央に配置しています。

プレビュー：http : //jsfiddle.net/tLkSV/513/

HTML：

<div id="container">
    <span></span><div class="outer">
        <span></span><div class="inner">

        </div>
    </div>
</div>

CSS：

html, body {
    height: 100%;
    margin: 0;
    padding: 0; }
#container {
    text-align: center;
    height: 100%; }
span { 
    height: 100%;
    vertical-align: middle;
    display: inline-block; }
.outer {
    width: 100px;
    height: 200px;
    padding: 0;
    border: 1px solid #000;
    vertical-align: middle;
    display: inline-block; }
.inner {
    background: red;
    width: 30px;
    height: 20px;    
    vertical-align: middle;
    display: inline-block; }

垂直方向の整列は、互いに隣接する要素の中心を整列させることによって機能します。1つの要素に垂直方向の配置を適用しても、まったく何も起こりません。幅はないがコンテナの高さである2番目の要素を追加すると、単一の要素はこの幅のない要素とともに垂直方向に中央に移動し、垂直方向に中央に配置されます。唯一の要件は、両方の要素をインライン（またはインラインブロック）に設定し、それらの垂直配置属性をに設定することvertical-align: middleです。

注：以下のコードで、私の<span>タグと<div>タグが接触していることに気付くかもしれません。どちらもインライン要素であるため、スペースは実際にはno-width要素とdivの間にスペースを追加するので、省略してください。

将来的には、この問題はflexboxによって解決される予定です。現在のところ、ブラウザーのサポートは悲惨ですが、現在のすべてのブラウザーでは、何らかの形でサポートされています。

ブラウザのサポート：http : //caniuse.com/flexbox

.vertically_aligned {

    /* older webkit */
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-justify-content: center;

    /* older firefox */
    display: -moz-box;
    -moz-box-align: center;
    -moz-box-pack: center;

    /* IE10*/
    display: -ms-flexbox;
    -ms-flex-align: center;
    -ms-flex-pack: center;

    /* newer webkit */
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-box-pack: center;

    /* Standard Form - IE 11+, FF 22+, Chrome 29+, Opera 17+ */
    display: flex;
    align-items: center;
    justify-content: center;
}

フレックスボックスの背景：http ://css-tricks.com/snippets/css/a-guide-to-flexbox/

コードや例を提供していないAsafの回答を除いて、ここで提供される完全な回答はありません。そのため、私は私の貢献をしたいと思います...

INORDERを作るためにvertical-align: middle;仕事を、あなたが使用する必要がdisplay: table;あなたのためのul要素とdisplay: table-cell;のためのli要素と、使用できるよりもvertical-align: middle;ためにliの要素。

明示的に提供する必要はありませんmargins。paddingsあなたのテキストを縦真ん中にします。

デモ

ul.catBlock{
    display: table;
    width:960px; 
    height: 270px; 
    border:1px solid #ccc; 
}

ul.catBlock li {
    list-style: none;
    display: table-cell; 
    text-align: center; 
    width:160px; 
    vertical-align: middle;
}

ul.catBlock li a { 
    display: block;
}

ここで説明されているように：https : //css-tricks.com/centering-in-the-unknown/。

実際の練習でテストとして、最も信頼性の高いエレガントなソリューションは、バイヤーへのインライン要素を挿入することで<li />、高さは（、その親の身長の100％に設定する必要があります第一子、などの要素<li />）、およびそのvertical-align真ん中にセット。これを実現するには、を置くことができます<span />が、最も便利な方法はli:after疑似クラスを使用することです。

スクリーンショット：

ul.menu-horizontal {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
}

ul.menu-horizontal:after {
    content: '';
    clear: both;
    float: none;
    display: block;
}

ul.menu-horizontal li {
    padding: 5px 10px;
    box-sizing: border-box;
    height: 100%;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    float: left;
}

/* The magic happens here! */
ul.menu-horizontal li:before {
    content: '';
    display: inline;
    height: 100%;
    vertical-align: middle;
}

このソリューションをお試しください

ほとんどの場合に最適です

あなたはそのためにliの代わりにdivを使用する必要があるかもしれません

.DivParent {
    height: 100px;
    border: 1px solid lime;
    white-space: nowrap;
}
.verticallyAlignedDiv {
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}
.DivHelper {
    display: inline-block;
    vertical-align: middle;
    height:100%;
}

<div class="DivParent">
    <div class="verticallyAlignedDiv">
        <p>Isnt it good!</p>
     
    </div><div class="DivHelper"></div>
</div>

垂直方向の中央揃えの簡単な解決策...私にとっては魅力のように機能します

ul{display:table; text-align:center; margin:0 auto;}
li{display:inline-block; text-align:center;}
li.items_inside_li{display:inline-block; vertical-align:middle;}