Центр текста в div?

Question

У меня есть div 30px высота и 500px ширина.Этот div может содержать две строки текста одна под другой, и соответственно оформлен (дополнен)Но иногда он содержит только одну строку, и я хочу, чтобы это было по центру.Возможно ли это?

Answer 1

Для центрирования по горизонтали используйте text-align:center.

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

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

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

Answer 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.

Answer 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; 
}

Answer 4

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

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

Answer 5

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

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

Answer 6

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

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

Answer 7

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

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

Answer 8

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

div {  
    vertical-align:middle;  
}

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

Например, если размер шрифта составляет 12 пикселей, а размер отступа 5 пикселей, высота разделителя в одну текстовую строку составит 5 пикселей (верхний отступ) + 12 пикселей + 5 пикселей (нижний отступ) = 22 пикселя.<30px, так что нет проблем, </p>

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

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

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

Answer 9

Возможно, я что-то здесь упускаю, но вы пытались:

Answer 10

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

margin:auto;