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

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

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

Answer 4

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

Answer 5

Chris Coyier написал отличный учебник по только это: http://css-tricks.com/vertically-center-multi-lined-text/

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

Answer 6

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

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

Источник: here

Demo: связанный на указанной выше странице

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