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

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

Спасибо

 David Thomas09 июл. 2009 г., 08:27
Вертикально выровнять по отношению к чему?

Ответы на вопрос(5)

<div style="display: table-cell; vertical-align: middle;">I'm in the middle!</div>
 09 июн. 2013 г., 23:42
Не работает с плавающими элементами
 09 июл. 2009 г., 19:09
Не работает в IE6 / IE7 :(

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

Решение Вопроса

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>

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

Я процитирую экспертов, чтобы не выдумывать это: "...internal object is absolutely positioned in half of the area height. Then is moved up by half of its height."

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

Источник:Вот

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

Here goes my first answer...

http://css-tricks.com/vertically-center-multi-lined-text/

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

Ваш ответ на вопрос