Как вертикально выровнять текст внутри элементов списка фиксированной высоты с помощью CSS?

Как можно вертикально выровнять текст в следующих элементах списка:

<style>

ul { list-style-type: none; width: 300px; }
ul li { border: 1px solid red; height: 100px; }

</style>

<ul>
    <li>A bear</li>
    <li>A panda who eats bamboo</li>
    <li>A giraffe with a very very very very very veryvery very very very long neck</li>
</ul>

Я не могу использовать линейную высоту, потому что эти предложения динамически генерируются и могут быть одной строкой или многострочной (не всегда singe). Вот почему я могу просто индивидуально настраивать каждую <li> с пользовательским дополнением.

Вертикальный выравнивающий срез тоже не работает, после чтения на нем он отображается только для элементов, которые объясняют, почему выравнивание текста внутри используемого элемента не работает.

Ответ 1

Оберните содержимое каждого <li> в <span>, затем примените следующий css:

ul li span {
    height: 100px;
    display: table-cell;
    vertical-align: middle;
}

http://jsfiddle.net/K2eF3/12/

Ответ 2

если вы не слишком беспокоитесь об IE7 и ниже, попробуйте обернуть текст div и добавьте display:table-cell, vertical-align:middle и height:100px в div.

Ответ 3

Safari/Chrome и Firefox имеют свои собственные реализации CSS Flexible Box Module, который позволяет использовать этот вид макета:

http://jsfiddle.net/K2eF3/4/

Однако для Opera и Internet Explorer, к сожалению, нет display:-o-box; или display:-ms-box;.

Ответ 4

Здесь мое рабочее решение.

Он использует jQuery для вертикального выравнивания диапазона внутри li. Чтобы убедиться, что диапазон правильно выровнен, он должен иметь свойство отображения, которое должно иметь значение встроенного блока.

Если вы не можете изменить вывод на промежутки внутри LI, я могу помочь вам сделать это с помощью jQuery.