Как выровнять текст по вертикали?
Как выровнять текст по вертикали в плавающем div? Например: у меня динамический контент с фиксированной высотой. если контент маленький или большой, он должен автоматически выравниваться по вертикали.
Спасибо
Ответы на вопрос(5)
Я знаю, что это испортит мою репутацию, но ... используйте ячейку стола. Любое кросс-браузерное 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/
Я использовал его сам, и он отлично работает.