Есть ли простой способ центрировать текст по вертикали в div?

Question

У меня есть текст в <div>, который я хочу по центру по вертикали. Любой простой способ сделать это (не абсолютный метод позиционирования).

Answer 1

это еще один способ:

http://jsfiddle.net/SebastianPataneMasuelli/V2D3L/1/

трюк состоит в том, чтобы сделать высоту div той же величиной, что и высота линии.

<div>some text</div> 

div { 
line-height: 100px; 
height: 100px; 
} 

Это дает вам линию вертикально-центрированного текста.

есть способ: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html.

извините, что использует абсолютное позиционирование.

(но это работает)

Answer 2

Нет, к сожалению, нет хорошего способа сделать это с помощью CSS. Я бы предложил использовать фреймворк javascript, такой как JQuery, или что-то подобное, чтобы достичь этого. Это просто текст, который вы пытаетесь вертикально сосредоточиться?

Кроме того, я знаю, что многие люди неохотно используют таблицы, однако html-таблицы позволят вам вертикально центрировать ваш текст, чтобы можно было быстро работать, если вы не хотите использовать javascript для достижения этого.

Поэтому я предполагаю, что он либо использует некоторый javascript, либо избегает использования html-таблиц или просто использует таблицы для вертикального центрирования для вас.

Только для справки вы используете атрибут valign для элемента td таблицы для вертикального выравнивания его содержимого.

Вы могли бы сделать что-то вроде этого:

<div id="center-text"> 

    <div id="center-text-inner"> 
    hello there 
    </div> 

</div> 

$(document).ready(function() { 

    $('#center-text-inner').css({ 
    'position' : 'relative', 
    'top' : ($('#center-text').height() - $(this).height())/2 
    }); 

}); 

Answer 3

Да, это возможно - очень тщательное исследование можно найти здесь:

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Answer 4

Просто добавьте следующие CSS для Div

display:table-cell; 
vertical-align:middle; 

вы также можете увидеть пример http://www.templatespoint.com/blog/2010/10/div-vertical-align-middle/