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

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

ОТВЕТЫ

Ответ 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.

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

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

Ответ 3

Нет, к сожалению, нет хорошего способа сделать это с помощью 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
  });

});