Текст центра в div?

Ответ 1

Чтобы центрировать по горизонтали, используйте text-align:center.

Чтобы центрировать по вертикали, можно использовать только vertical-align:middle, если есть другой элемент в той же строке, к которой он привязан.
Посмотрите, как работает здесь.

Мы используем пустой диапазон с высотой 100%, а затем помещаем содержимое в следующий элемент с выравниванием по вертикали: средний.

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

Удачи.

Ответ 2

Я считаю, что вы хотите, чтобы текст был вертикально центрирован внутри вашего div, а не (только) горизонтально. Единственный надежный способ, которым я знаю, это использовать:

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

на вашем div, и он работает с любым количеством строк. Вы можете увидеть тест здесь: http://jsfiddle.net/qMtZV/1/

Обязательно проверьте поддержку браузера этого свойства, поскольку он не поддерживается - например, - в IE7 или ранее.

ОБНОВЛЕНИЕ 02/10/2016

Пять лет спустя этот метод все еще действителен, но я считаю, что в этой проблеме есть более надежные решения. Поскольку Flexbox поддержка хороша в наши дни, вам может понадобиться сделать что-то в этом направлении: http://codepen.io/michelegera/pen/gPZpqE.

Ответ 3

HTML

<div class="outside">
  <div class="inside">
      <p>Centered Text</p>
  </div>
</div>

CSS

.outside { 
  position: absolute; 
  display: table; 
}

.inside {
  display: table-cell; 
  vertical-align: middle; 
  text-align: center; 
}

Ответ 4

Если у вас есть текст внутри <div>:

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

Ответ 5

div {
    height: 256px;
    width: 256px;
    display: table-cell;
    text-align: center;
    line-height: 256px;
}

Трюк состоит в том, чтобы установить line-height равным height div.

Ответ 6

Добавление высоты строки также помогает.

text-align: center;
line-height: 18px; /* for example. */

Ответ 7

Возможно, мне что-то не хватает, но вы пробовали:

text-align:center; 

??

Ответ 8

Вы можете попытаться использовать в своем CSS свойство vertical-align для того, чтобы центрировать его вертикально

div {  
    vertical-align:middle;  
}

Если это проблема размера, обратите внимание, что 2 текстовые строки и стиль отступов имеют большой шанс увеличить высоту до 30 пикселей.

Например, если размер вашего шрифта равен 12 px, а ваше отступы на div - 5 пикселей, высота одного текстового текста будет равна 5px (padding-top) + 12px + 5 px (padding-bottom) = 22px < 30px, поэтому никаких проблем,

С 2 текстовыми строками div будет 5px + 12px * 2 (2 строки) + 5px = 34px > 30px, и ваша высота div будет автоматически изменена.

Попробуйте либо увеличить высоту div (возможно, 40 пикселей), либо уменьшить количество дополнений.

Надеюсь, что это поможет

Ответ 9

Для родительского div используйте следующий CSS:

style="display: flex;align-items: center;"

Ответ 10

Будет ли это работать для вас?

div { text-align: center; }

Ответ 11

Я огляделся и

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

представляется наиболее популярным решением

Ответ 12

display: block;
text-align: center;

Ответ 13

Добавить в селектор, содержащий текст

margin:auto;