web-dev-qa-db-ja.com

縦方向に中央揃えのリストアイテム

リストを作成する次のHTMLとCSSがあります。リストアイテムにはmin-heightが設定されています。高さ全体を満たすのに十分なコンテンツがない場合は、リストアイテムのコンテンツを上部ではなく中央で垂直方向に揃えます。一体これをどうやって脱ぐのですか？

<html>
    <head>
        <style type="text/css">
            ul {
                width : 300px;
                list-style-type: none;
            }

            li {
                min-height : 45px;
                vertical-align : middle;
                border-bottom : 1px black solid;
            }
        </style>
    <head>
    <body>
        <ul>    
            <li>Testing testing 1234</li>
            <li>Testing testing 1234 Testing testing 1234</li>
            <li>Testing testing 1234 Testing testing 1234 Testing testing 1234</li>
            <li>Testing testing 1234 Testing testing 1234 Testing testing 1234 Testing testing 1234</li>
            <li>Testing testing 1234 Testing testing 1234 Testing testing 1234 Testing testing 1234 Testing testing 1234</li>
       </ul>
 </body>

これは私に次を与えます：

enter image description here

htmlcssvertical-alignment
15
Steve

<div>内に<li>を追加し、CSSに次の変更を加えると、機能するようです。

li {
    min-height : 45px;
    border-bottom : 1px black solid;
}
li div {
    height:45px;
    display:table-cell;
    vertical-align : middle;
}

ここでライブでご覧ください-IE8とFF4で動作します： http://jsfiddle.net/RrVBh/

22
dragfyre

ああ、良いol ' 垂直方向の整列 。最も簡単な方法はline-height: 45px;を設定することですが、これはコンテンツが1行ある場合にのみ機能し、追加の行を強制的にオーバーフローさせます。

それ以外の場合は、上記のリンクに示されているようにdisplay:table-cell; vertical-align: middle;を使用できます。

4
scurker