web-dev-qa-db-ja.com

1行および複数行のliテキストを垂直方向に中央揃え

背景画像が設定された順序なしリストがあります。すべてのリストアイテムの高さは同じで、背景画像は左中央に配置されます。

各項目のテキストは、liに対して垂直方向の中央である必要があります。これは、単一行のテキスト（liの高さに応じて行の高さを設定することによる）ではうまく機能しますが、2行のテキストでは機能しません。

2行のアイテムに「line-height：normal」を追加することもできますが、すべてのアイテムで機能するソリューションが必要です。

これどうやってするの？

例：

li { 
    list-style-type:none; 
    padding-left:40px; 
    height:36px;
    line-height:36px; 
    background:url('tick.png') no-repeat 0 50%; 
}
csslistcenter
18
Raphael Müller

これは最もクロスブラウザソリューションです

    li {
        width           : 200px;
        line-height     : 100px;
        height          : 100px;
        border          : 1px blue solid;        
    }
    li span {
        display                         : -moz-inline-box;  /* FF2 or lower */
        display                         : inline-block;     /* FF3, Opera, Safari */
        line-height         : normal;
        vertical-align      : middle;    
    }
    
    li span             { *display      : inline;} /* haslayout for IE6/7 */
<ul>
       <li><span>My text</span></li>
       <li><span>My longer text</span></li>
       <li><span>My text, but this time is really wide</span></li>
       <li><span>My text, some thoughts about how much it will expand in this item.</span></li>
    </ul>

簡潔にするためにスターハックを使用しました。避ける必要があります。 html5boilerplateソリューションを使用するだけで、bodyタグに条件付きコメントを使用します

44
fcalderan
li {
    height:200px; 
    line-height:200px;
    border:1px solid red;
}
li span {
    vertical-align:middle; 
    display:inline-block; 
    line-height:1.2;
}

<li>
    <span>two<br />lines</span>
</li>

動作するはずです。

編集：変更を確認するために更新

3
MatTheCat