web-dev-qa-db-ja.com

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>
htmlcssvertical-alignment
85
AK4668

display: tableで親を定義し、vertical-align: middleおよびdisplay: table-cellで要素自体を定義します。

93
Asaf Chertkoff

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

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

52
Logan Serman

驚くべきことに（またはそうではない）、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; }

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

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

15
Wex

将来的には、この問題は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;
}

Flexboxの背景： http://css-tricks.com/snippets/css/a-guide-to-flexbox/

13
Scott Joudry

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

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

flexboxのブラウザーサポートは、@ scottjoudryが上記の応答を投稿したときよりもはるかに優れていますが、古いブラウザーをサポートする場合は、プレフィックスまたはその他のオプションを検討する必要があります。 caniuse：flex

10
flyingace

ここにはコードも例も提供されていないAsafの答えを除いて完璧な答えはありませんので、私は私に貢献したいと思います...

vertical-align: middle;を機能させるには、ul要素にdisplay: table;を、li要素にdisplay: table-cell;を使用する必要があり、li要素にvertical-align: middle;を使用する必要があります。

テキストを垂直方向に真ん中にするために、明示的な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;
}
5
Mr. Alien

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

ほとんどの場合に最適に動作します

あなたは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>
1
keshav

垂直方向の中央揃えのためのシンプルなソリューション...私にとっては、それは魅力のように機能します

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;}
0
Fahad Ali