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

У меня есть div 30px high и 500px ширину. Этот 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; 
    Interesting Posts

    Как отключить кнопку в диалоговом окне JQuery UI?

    Как объявить массив как константу в Objective-c?

    Как разделить матричные элементы на суммы столбцов в MATLAB?

    Oozie: Launch Map-Reduce от Oozie action?

    Заполните гистограммы (уменьшение массива) параллельно с OpenMP без использования критического раздела

    Как получить доступ к подключенному к сети приводу в подсистеме Windows Linux?

    Изменить положение кнопки «Мое местоположение» в Google Maps API

    Функция jQuery после .append

    Background ListView становится черным при прокрутке

    Использование интернет-мониторинга Office

    Как я могу предотвратить использование Dragon NaturallySpeaking заглавной буквы каждый раз после того, как я нажму Ctrl + Left?

    Как локализовать сообщения об ошибках ASP.NET Identity UserName и Password?

    Использование анонимных пространств имен в файлах заголовков

    Самый быстрый способ безопасно скопировать 1ТБ на провод

    Обновление набора C ++ STL утомительно: я не могу изменить элемент на месте

    Давайте будем гением компьютера.