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

Question

Как выровнять текст по вертикали в плавающем div? Например: у меня динамический контент с фиксированной высотой. если контент маленький или большой, он должен автоматически выравниваться по вертикали.

Спасибо

Answer 1

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

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

редактировать: или это удивительный 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>

Я хотел написать в блоге об этом какое-то время, думаю, пришло время.

Answer 2

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

Answer 3

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

Answer 4

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

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

Answer 5

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

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

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

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

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

Answer 6

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