Вопрос по html, css, vertical-alignment – Как выровнять текст по вертикали?

13

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

Спасибо

Вертикально выровнять по отношению к чему? David Thomas

Ваш Ответ

5   ответов
10
<div style="display: table-cell; vertical-align: middle;">I'm in the middle!</div>
Не работает с плавающими элементами
Не работает в IE6 / IE7 :(
11

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

12

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>

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

2

Я процитирую экспертов, чтобы не выдумывать это: "...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...

5

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

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

Похожие вопросы