Intereting Posts
Свяжите текстовое поле с ключом «ввести» Почему атрибут ‘title’ заставляет браузер игнорировать мои стили? скрыть элементы jquery в функции ajax HTML-tags в методе Javascript Alert () Вертикальное выравнивание текстового курсора (каретки?) В поле ввода с помощью jQuery, Javascript или CSS Как вы используете echo внутри строки таблицы html? Как получить текст тега div, используя только javascript (без jQuery) Встроенная видеоизображение в формате Full Width и Height Только включить панель прокрутки на теле и отключить на другом Div с CSS HTML как сделать автоматическую настройку текстовой кнопки Массив блока checkbox возвращает NULL Angular.js ng-repeat через несколько tr Существует ли эквивалент CSS max-width, который работает в электронных письмах HTML? Создание двух соседних элементов ведет себя как один элемент Как можно сгладить прокрутку вверх и вниз между объектами на странице со стрелками?

Текст центра CSS (по горизонтали и вертикали) внутри блока div

У меня есть div для display:block . ( height и width 90px ), и у меня есть текст внутри.

Мне нужен текст, который будет выровнен по центру как по вертикали, так и по горизонтали.

Я попробовал text-align:center , но он не выполняет горизонтальную часть, поэтому я попробовал vertical-align:middle но это не сработало.

Есть идеи?

Если это одна строка текста и / или изображение, то это легко сделать. Просто используйте

 text-align: center; vertical-align: middle; line-height: 90px; /* the same as your div height */ 

это оно. Если это может быть несколько строк, то это несколько сложнее. Но есть решения на http://pmob.co.uk/ Ищите «вертикальное выравнивание».

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


Обновление для 2016/2017:

Его можно чаще выполнять с помощью transform , и он хорошо работает даже в старых браузерах, таких как IE10 и IE11. Он может поддерживать несколько строк текста:

 position: relative; top: 50%; transform: translateY(-50%); 

Пример: https://jsfiddle.net/wb8u02kL/1/

Чтобы сжать обертку шириной:

В приведенном выше решении использовалась фиксированная ширина для области содержимого. Чтобы использовать ширину термоусадочной пленки, используйте

 position: relative; float: left; top: 50%; left: 50%; transform: translate(-50%, -50%); 

Пример: https://jsfiddle.net/wb8u02kL/2/

Я попробовал flexbox, но он не был так широко поддержан, как он сломался в какой-то более старой версии IE, такой как IE10.

Общие методы на 2014 год:


  • Подход 1 – transform translateX / translateY :

    Пример здесь / полный экран Пример

    В поддерживаемых браузерах (большинство из них) вы можете использовать top: 50% / left: 50% в сочетании с translateX(-50%) translateY(-50%) для динамического вертикального / горизонтального центрирования элемента.

     .container { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } 

  • Подход 2 – метод Flexbox:

    Пример здесь / полный экран Пример

    В поддерживаемых браузерах настройте display целевого элемента на flex и используйте align-items: center вертикального центрирования и justify-content: center горизонтального центрирования. Не забудьте добавить префиксы поставщиков для дополнительной поддержки браузера ( см. Пример ).

     html, body, .container { height: 100%; } .container { display: flex; align-items: center; justify-content: center; } 

  • Подход 3 – table-cell / vertical-align: middle :

    Пример здесь / полный экран Пример

    В некоторых случаях вам необходимо убедиться, что высота элемента html / body установлена ​​на 100% .

    Для вертикального выравнивания установите width / height родительского элемента на 100% и добавьте display: table Затем для дочернего элемента измените display на table-cell и добавьте vertical-align: middle .

    Для горизонтального центрирования вы можете либо добавить text-align: center чтобы центрировать текст и любые другие inline дочерние элементы. В качестве альтернативы вы можете использовать margin: 0 auto предполагая, что элемент является block уровнем.

     html, body { height: 100%; } .parent { width: 100%; height: 100%; display: table; text-align: center; } .parent > .child { display: table-cell; vertical-align: middle; } 

  • Подход 4 – Абсолютно позиционированный 50% сверху с перемещением:

    Пример здесь / полный экран Пример

    Этот подход предполагает, что текст имеет известную высоту – в данном случае – 18px . Просто абсолютно позиционируйте элемент 50% сверху, относительно родительского элемента. Используйте отрицательное значение margin-top которое составляет половину известной высоты элемента, в данном случае – -9px .

     html, body, .container { height: 100%; } .container { position: relative; text-align: center; } .container > p { position: absolute; top: 50%; left: 0; right: 0; margin-top: -9px; } 

  • Подход 5 – Метод line-height (наименьшая гибкость – не рекомендуется):

    Пример здесь

    В некоторых случаях родительский элемент будет иметь фиксированную высоту. Для вертикального центрирования все, что вам нужно сделать, – установить значение line-height для дочернего элемента, равное фиксированной высоте родительского элемента.

    Хотя это решение будет работать в некоторых случаях, стоит отметить, что он не будет работать, когда есть несколько строк текста – вот так .

     .parent { height: 200px; width: 400px; text-align: center; } .parent > .child { line-height: 200px; } 

Методы 4 и 5 не являются наиболее надежными. Пойдите с одним из первых 3.

Использование flexbox / CSS:

 

CSS:

 .box{ display: flex; justify-content: center; align-items: center; } 

Взятый из Quick Tip: самый простой способ центрирования элементов по вертикали и горизонтали

добавить display: table-cell; строки display: table-cell; к вашему css для этого div. только ячейки таблицы поддерживают вертикальное выравнивание: среднее; но вы можете дать определение [table-cell] для div.

живой пример здесь: http://jsfiddle.net/tH2cc/

 div{ height:90px; width:90px; text-align:center; border:1px solid silver; display: table-cell; // this says treat this element like a table cell vertical-align:middle; //now we can center vertically like in a TD } 

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

 display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; 

Смотрите здесь: https://jsfiddle.net/yp1gusn7/

вы можете попробовать очень простой код для этого

  display:flex; align-items: center; justify-content:center; 
 .box{ height:90px; width:90px; background:green; display:flex; align-items: center; justify-content:center; } 
 
Lorem

Дайте этот class css целевому

 .centered { width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; text-align: center; background: red; /* not necessary just to see the result clearly */ } 
 
This text is centered horizontally and vertically

Подход 1

 div { height: 90px; line-height: 90px; text-align: center; border: 2px dashed #f69c55; } 
 
Hello World!
 #parent { display:table; } #child { display:table-cell; width:100%; //as large as its parent to center the text horizontally text-align: center; vertical-align:middle;//vertically align this element on its parent } 
 
Text centered

Это работает для меня (проверено нормально!)

HTML:

 

Item to be Centered!

CSS:

 .mydiv { height: 100%; /* or other */ position: relative; } .mydiv p { margin: 0; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); /* to compensate own width and height */ } 

вы можете выбрать другие значения, а затем 50% fi. 25% – на 25% от родительского

 div { height: 90px; line-height: 90px; text-align: center; border: 2px dashed #f69c55; } 
 
Hello World!

Одним из лучших методов является использование свойства flex в родительском div и добавление поля: свойство auto для тега элемента

 .parent{ display: flex; flex-direction: column; flex: 1; height:100%; } p{ margin:auto; } 

Регулировка высоты линии для выравнивания по вертикали.

 line-height: 90px; 

Это должен быть правильный ответ. Самый чистый и простой:

 .element { position: relative; top: 50%; transform: translateY(-50%); } 
       

hello world

       

Title

Вы можете попробовать следующие методы:

1. Если у вас есть одно слово или одно предложение, следующий код может сделать трюк.

Имейте текст внутри тега div и дайте ему идентификатор. Определите следующие свойства для этого id.

 id-name { height: 90px; line-height: 90px; text-align: center; border: 2px dashed red; } 

Примечание. Убедитесь, что свойство line-height совпадает с высотой деления.

Образ

Но, если контент содержит более одного слова или строки, это не работает. Кроме того, будут случаи, когда вы не можете указать размер divison в px или%. (Когда divison действительно мал и вы хотите, чтобы контент был точно посередине)

2. Чтобы решить эту проблему, мы можем попробовать следующую комбинацию свойств.

 id-name { display: flex; justify-content: center; align-items: center; border: 2px dashed red; } 

Образ

Эти 3 строки кода задают контент точно в середине разделения (независимо от размера дисплея). «Align-items: center» помогает в вертикальном центрировании, а «justify-content: center» сделает его горизонтально центрированным.

Примечание. Flex не работает во всех браузерах. Убедитесь, что вы добавили соответствующие префиксы поставщиков для дополнительной поддержки браузера.

Применить стиль:

 position: absolute; top: 50%; left: 0; right: 0; 

Ваш текст будет центрирован независимо от его длины.

 .cell-row {display: table; width: 100%; height: 100px; background-color: lightgrey; text-align: center} .cell {display: table-cell} .cell-middle {vertical-align: middle} 
 
Center

Это сработало для меня

 .center-stuff{ text-align: center; vertical-align: middle; line-height: 230px;/*This should be the div height*/ } 

Попробуйте следующий пример. Я добавил примеры для каждой категории: горизонтальные и вертикальные

       
Center horizontal text
Center vertical text
      
Center horizontal text
Center vertical text
 footer { width: 100%; height: 80px; position: absolute; bottom: 0; left: 0; }