Элементы списка по вертикали

У меня есть следующий HTML и CSS, который создает список, в котором элементы списка имеют минимальную высоту. Я хотел бы, чтобы содержимое элементов списка было выровнено по вертикали в середине, а не сверху, если содержимого недостаточно для заполнения всей высоты. Как я это делаю?

<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

ОТВЕТЫ

Ответ 1

Если вы добавите <div> внутри <li> и внесите следующие изменения в CSS, это сработает:

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

Смотрите здесь live - работает в IE8 и FF4: http://jsfiddle.net/RrVBh/

Ответ 2

Ahh, good ol < вертикальное выравнивание. Самый простой способ - установить line-height: 45px;, но это работает только в том случае, если у вас есть одна строка содержимого и заставит все дополнительные строки переполняться.

В противном случае вы можете использовать display:table-cell; vertical-align: middle;, как показано в приведенной выше ссылке.