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

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

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

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

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

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

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

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

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

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

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

HTML

 
 
 
Centered Text
 
  

CSS

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

Если у вас есть текст внутри

:

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

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

Хитрость заключается в том, чтобы установить line-height равную height div .

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

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

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

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

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

 text-align:center; 

??

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

 div { vertical-align:middle; } 

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

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

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

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

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

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

 div { text-align: center; } 

Я осмотрелся и

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

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

 display: block; text-align: center; 

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

 margin:auto;