Как расположить текст вертикально по центру css

Как выровнять текст вертикально по центру в CSS

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

Чтобы выровнять текст по центру блока в css или какого-либо контейнера нужно использовать свойство vertical-align, но не только его и под каждый случай используются отдельные свойства.

Первый вариант

Второй вариант

Если у вас одна строчка, то можно использовать это:

Если больше чем одна, то это:

Третий вариант

Для более старых браузеров — IE6/7. # — используется как хак для работы старых браузеров.

Об авторе

Следите за мной

Спасибо, все получилось! Только не сразу поняла где менять права…

Благодарю! Первый способ помог. Остальные пока не понадобились, но решения…

Центрирование в CSS

Центрирование в CSS

Для центрирования встроенного элемента, такого как ссылка, span или изображение, все, что вам нужно, это text-align: center.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Центрирование в CSS

Для нескольких встроенных элементов процесс аналогичен. Это возможно при использовании text-align: center.

Центрирование в CSS

Flexbox

Изменив display на flex гибкий, мы можем легко центрировать содержимое.

Центрирование в CSS

Даже для нескольких встроенных элементов центрирование работает без проблем.

Центрирование в CSS

CSS-сетка

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

Центрирование в CSS

2. Блочные элементы

Auto Margin

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

Центрирование в CSS

Auto Margin

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

Центрирование в CSS

Flexbox

Вы можете использовать flexbox для центрирования тарелки.

Центрирование в CSS

Также не нужно оборачивать тарелки в контейнер, чтобы выровнять их по центру. Flexbox может это сделать!

Центрирование в CSS

CSS позиционирование

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

Центрирование в CSS

Если ширина элемента известна, вы можете использовать вместо преобразований CSS отрицательное поле.

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

у меня есть div значение display:block . ( 90px height и width ) и у меня есть некоторый текст внутри.

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

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

24 ответов

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

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

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

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

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

для сжатия оберните ширину:

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

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

общие методы по состоянию на 2014 год:

подход 1 — transform translateX / translateY :

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

подход 2 — Flexbox метод:

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

подход 3 — table-cell / vertical-align: middle :

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

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

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

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

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

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

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

дайте этот класс css целевому

подход 1

подход 2

подход 3

один из лучших подходов-использовать свойство flex в Родительском div и добавить margin:auto свойство элемент tag

это работает для меня (протестировано ok!)

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

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

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

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

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

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

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

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

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

эти 3 строки кода устанавливают содержимое точно в середине деления (независимо от размер дисплея). The "align-items: center" помогает в вертикальном центрировании в то время как "оправдать-содержание: центр" будет делать это по горизонтали.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *