Как вертикально выравнивать текст?

Ответ 1

Ячейки таблицы являются самым простым решением.

Javascript - это альтернатива (измерьте размер и размер текста div, затем отрегулируйте отступы или линейную подсветку или что-то еще).

edit: Или этот удивительный css:

CSS

div#container {
    border: solid 1px;
    height: 300px;
}

div#content {
    border: solid 1px;
}

div#balance {
    border: solid 1px;
    /* gotta be 100% */
    height: 100%;
}

div.valign {
    /* firefox 2 */
    display: -moz-inline-box;
    /* everybody else */
    display: inline-block;

    vertical-align: middle;
}

/* IE 6 and 7 hack */
html* div.valign {
    display: inline;
}

HTML

<div id="container">
    <div id="balance" class="valign"></div>
    <div id="content" class="valign">
        Blah blah blah blah<br/>
        Blah blah blah blah<br/>
        Blah blah blah blah<br/>
        Blah blah blah blah<br/>
        Blah blah blah blah
    </div>
</div>

Имело смысл сделать сообщение в блоге об этом некоторое время, я думаю, что это время.

Ответ 2

Я знаю, что это разрушит мою репутацию, но... используйте ячейку таблицы. Любое кросс-браузерное решение CSS для вертикального выравнивания будет в два раза сложнее поддерживать, будучи оптимистичным.

Ответ 3

<div style="display: table-cell; vertical-align: middle;">I'm in the middle!</div>

Ответ 4

Крис Койер написал отличный учебник по этому поводу: http://css-tricks.com/vertically-center-multi-lined-text/

Я использовал его сам, и он отлично работает.

Ответ 5

Я столкнулся с этой проблемой раньше. Я процитирую экспертов, поэтому я не выдумываю этого: "... внутренний объект абсолютно расположен на половине высоты области, а затем поднимается на половину высоты".

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

Источник: здесь

Демо: ссылка на приведенную выше страницу

Вот мой первый ответ...

Ответ 6

Вы пробовали вертикально-выровнять: средний;