Text Align in CSS – How to Align Text in Center with HTML
There will be many times where you will need to center some text using HTML and CSS. But what is the best way to go about that?
In this article, I will show you how to use the text-align property in CSS and show you how to vertically align text using CSS Flexbox. I will also talk about the <center> tag and why you shouldn’t use it to center text.
How to Use the text-align Property in CSS
When you are working with heading or paragraph tags, the default styling in HTML will position the text on the left hand side of the page.
In this example, we have an <h1> which is placed on the upper left hand side of the page.
If we wanted to horizontally center that text on the page, then we can use the text-align property.
If you wanted to horizontally center all of the text on the page, then you can use the text-align property in the body selector.
In this next example, we have some more text in our HTML.
Without any styling, it currently looks like this on the page.
In our CSS, we can target the body selector and use the text-align property.
How to Horizontally and Vertically Center Text
The text-align property is used to horizontally center text on the page. But we can also use CSS Flexbox to vertically center the text.
In this example, we have some text in our HTML:
This is what it currently looks like without any styling.
We can center the <h2> using the text-align property.
We can then horizontally and vertically center the paragraph inside the flex-container div using Flexbox.
Should you use the center tag?
In older versions of HTML, the <center> tag was used as a way to center text horizontally on the page.
A lot of new developers will still use this tag because it does display the correct results. However, the <center> tag was deprecated in HTML 4 because best practice is to use the CSS text-align property instead.
This is the deprecation warning from MDN docs
It is important to remember that HTML is for content while CSS is for styling. It is best practice to separate those two concerns and not use HTML for styling purposes.
I hope you enjoyed this article on how to center text using HTML and CSS.
Вертикальное и горизонтальное центрирование всего и вся в CSS Flexbox
В этой статье будет рассмотрен очень важный момент при вёрстке любого шаблона, а именно центрирование элементов. В Flexbox это стало гораздо проще и стабильнее.
Эта статья одна из завершающих из цикла переводов про CSS Flexbox. Скоро все они будут скомпонованы в один большой, понятный и объёмный гайд по изучению CSS Flexbox.
��Мой Твиттер — там много из мира фронтенда, да и вообще поговорим��. Подписывайтесь, будет интересно: ) ✈️
В примерах с навигацией используется пример кода отсюда.
Разочаровались в попытках использования CSS для выравнивания по центру с div ’ами, изображениями и текстом?
Вообще, выравнивание горизонтально и вертикально в CSS всегда было таким, каким-то странным и зачастую не таким, как вообще задумывалось. Я успел применить буквально все хаки в этом направлении за последние несколько лет.
К сожалению, во флотах нет опции center , только left и right . Ну и конечно же там нет опции vertical-center .
CSS Flexbox исправил эти недочеты. Теперь у вас больше контроля над выравниванием HTML элементов, включая опцию идеального центрирования буквально всего, что только можно.
Вообще, во Flexbox стало очень легко отцентровывать текст, изображения и div ’ы. Но это не означает того, что это единственный способ центрировать контент.
Вы наверное делали как я и искали на пространствах сети лучшие способы горизонтальной и вертикальной центровки в HTML.
Я не буду докучать вам объяснениями этих старых хаков с применением внешних отступов, абсолютного и фиксированного позиционирования. Они до сих пор работают, но уже сейчас пора от них избавляться.
Как отцентровать текст в CSS с помощью text-align
Если вам нужно отцентровать текст c CSS внутри элемента, например div ’а, заголовка или параграфа, вы можете смело использовать свойство text-align .
Выставление text-align на center является самым распространенным способом горизонтального выравнивания текста с помощью CSS. Этот подход не ограничивается только текстом, он может использоваться для центровки почти всех элементов потомков, которые меньше родительского контейнера.
Вот три вещи, которые нужно обязательно знать правильного использования text-align , чтобы горизонтально отцентровать текст или элементы потомки.
Текст или элемент центрирования должен быть обёрнут или находится в родительском элементе, который самой собой шире.
Родительский элемент должен иметь text-align: center .
Если вы центрируете элемент, то его свойство display должно быть с inline-block .
Если у вас несколько дочерних элементов, то они все дружно будут отцентрированы внутри родительского контейнера.
text-align имеет несколько свойств:
center : текст отцентрован.
left : текст выровнен по левой стороне контейнера.
right : текст выровнен по правой стороне контейнера.
justify : текст выстраивается ровно по левой и правой граням контейнера, за исключением последней строки.
justify-all : выравнивает последнюю строку.
start : тоже самое, что и left , если написание идёт слева направо. Но будет right , если написание справа налево.
end : start, только наоборот.
match-parent : тоже, что и inherit , но только start и end высчитываются с учетом родительского элемента.
Используйте эти свойства для выравнивания текста внутри родительского элемента или div ’а врапера. Тут всё обыденно и просто.
Выравниваем элементы горизонтально с text-align
Вы можете смело использовать свойство text-align , чтобы выравнивать элементы потомки.
Хороший пример — центровка панели навигации. Это может показаться тягомотиной, так как ширина каждого элемента меню зависит от его текста.
Вообще, центрирование куда проще, если вы знаете точную ширину родителя и его потомков.
Вы можете применить text-align: center для врапера панели навигации. А внешний “родительский” элемент, то есть ul , должен быть с dispay: inline-block .
Ну, а чтобы элементы меню выглядели выровненными, поставим им float: left .
И теперь у вас горизонтально выровненное меню.
Это хороший способ для центрирования элементов, но это очень старый хак.
В наше время у нас уже есть кое-что получше, а именно CSS Flexbox.
CSS Flexbox
Flexbox был добавлен в стандарты CSS несколько лет назад, в основном для того, чтобы разобраться с распределением места и выравниванием элементов. По сути, это синтаксис одномерной раскладки.
А в купе с более новым CSS Grid, веб-разработчики получают куда более мощный инструмент для разработки сложных шаблонов, которые в последствии будет куда проще поддерживать.
Мы говорим, что это одномерный контроль раскладки, но на самом деле у него есть оси x и y. Как вы увидите далее, выравнивание в каждом случае будет происходить с разными свойствами.
Flexbox уже поддерживается всеми современными браузерами, включая даже Internet Explorer, который скоро прикроют. В общем, вы можете смело и уверенно использовать Flexbox в вашем CSS.
Центрируем текст горизонтально и вертикально, используя CSS для выравнивания по центру
Центрирование текста по абсолютному центру традиционно было было одной из самых распространенных проблем с костыльными решениями, которые решил Flexbox. В прошлом было неимоверно много хаков и костылей, таких как использование display: table и т.п. Как я и упоминал ранее, Flexbox сделал этот сложный и неестественный процесс куда более проще.
Для начала, давайте посмотрим на эту разметку, которая демонстрирует то, как отцентрировать текст горизонтально и вертикально.
Это div с элементами заголовков. Мы будем использовать CSS не только для горизонтального центрирования, но и для вертикального. Вы можете вставить любые элементы потомки, такие как <p> или <span> . Вообще очень крутая штука в CSS Flexbox в том, что его инструментарий может центрировать вертикально и горизонтально буквально всё, что только можно!
Тут div будет занимать всю доступную ширину и будет минимум в 200px высотой. Это даст нам вертикальные маргины для использования в этом примере.
Вся магия произойдет тогда, когда вы выставите display на flex . Когда display стоит на flex , вы можете использовать дополнительные flexbox свойства для управления уже самим макетом.
align-items и justify-content это важные свойства для абсолютного центрирования текста горизонтально и вертикально. Горизонтальное центрирование происходит с помощью justify-content , а вертикальное с align-items .
align-items может использоваться не только для центровки текста вертикально, но и любого дочернего элемента.
В следующих секциях будет показано то, как использовать эти свойства в разных случаях. В примерах с навигацией используется пример кода отсюда.
Горизонтальное центрирование div’ов с использованием CSS Flexbox
Flexbox делает центровку элементов простым и естественным процессом.
Поставьте родительскому элементу .navbar display:flex; . Выставите ширину, в этом примере я хочу, чтобы панель навигации растянулась по всему вьюпорту, то есть на 100%.
Чтобы выставить по центру дочерние элементы, поставьте justify-content: center для элемента родителя.
Чтобы сделать CSS более юзабельным, я разбил стили по разным селекторам:
Это становится очень удобным при разработке комплексных страниц и когда вам нужна такая же логика в позиционировании. Мне также нравится так делать, потому что таким образом выходит проще читать разметку и накладывать образ предполагаемого макета по ней.
Вертикальное центрирование div’ов с CSS Flexbox
Горизонтальное центрирование никогда не было самым сложным моментом.
Но что у нас с вертикальным центрированием? Ну или как бы мы применили CSS, что вертикально выровнять элементы?
Во многих случаях, это тот момент, при котором большинство разработчиков рвут на себе волосы.
Тут столько правил и костылей, которые нужно запомнить, а ведь всё равно что-нибудь да порушит всю раскладку.
Flexbox наконец-то исправил проблемы с вертикальным центрированием, выдав эту кейсу четкое и понятное правило для применения.
Как и с justify-content: center , которое выстраивает элементы потомки по центру оси x, flexbox align-items: center делает это по оси y.
В примере с меню в хедере, враппер навигационной панели отцентрирован вертикально.
Тут элемент хедер служит родителем для навигационной панели, и его ширина равна 100%, а min-height стоит на 80px.
Так как навигационная панель сама по себе меньше, чем 80px, то тут есть пустое место, с которым мы можем поиграться. Так мы можем сделать навигацию равноудаленной от вершины до низа хедера, добавив ему display: flex и align-items: center .
Абсолютное центрирование div’ов с использованием CSS Flexbox
Пока что мы только узнали то, как отцентрировать элементы горизонтально или вертикально. А теперь пора скомбинировать эти два метода.
Для этого я буду снова использовать панель навигации. Нам нужно, чтобы она отрендерилась в абсолютном центре хедера.
Всё, что вам для этого нужно сделать, это добавить как justify-content: center и align-items: center , ну и flex-direction: column в css для <header> .
Вы можете применять эту комбинацию flexbox свойств для центровки любого элемента, а не только navbar . Изображения, div ’ы и т.п. Все они могут быть также абсолютно отцентрированы внутри родительского элемента.
Можете посмотреть на то, как я применил этот принцип на полноэкранном фоновом изображении.
Как отцентровать изображение в CSS с помощью text-align и Flexbox
Вообще, изображения могут быть выровнены с использованием свойств text-align и flexbox.
Вы можете применить text-align для элемента родителя изображения с right , left и center возможностями выравнивания.
Вы также можете применить флоат слева или cправа, для размещения изображения у желаемой грани контейнера. Я склонен к тому, чтобы использовать флоат, так как обычно я выравниваю изображения внутри текста статьи.
Но тут всё ещё довольно проблематично сделать выравнивание без flexbox. Если вы примените абсолютное центрирование из флексов для контейнера изображения, то вы смело можете выставить картинку по центру обеих осей, ну или только одной, тут уже на ваш выбор.
Просто ради забавы, давайте выровняем изображение с использованием flexbox.
Те же самые правила, что и в примере выше.
Делаем родительский элемент display: flex , он должен быть больше или равным изображению по размерам, align-items и justify-content должны иметь center, а flex-direction выставлен на column .
Теперь изображение абсолютно центрировано в HTML элементе. Вы можете прописать CSS свойства так, что поменять центровка на вертикальную или горизонтальную.
Заключение
Контроль элементов и позиционирования текста это важнейший аспект при хорошей вёрстке.
В былые времена, центрирование и выравнивание элементов были нудным делом и требовали комбинации из разных костылей.
CSS Flexbox поменял подход к выравниваю элементов. И теперь горизонтальное центрирование, также как и вертикальное стали очень простыми.
А комбинирование свойств позиционриования из Flexbox c text-align , может сделать ваши шаблоны куда привлекательнее без громоздких костылей.
Выравнивание по центру в CSS
Выравнивание элементов по центру в CSS — это одна из самых популярных причин чтобы пожаловаться на CSS. «Почему всё так сложно?» — возмущаются они. Мне кажется, что проблема заключается не в том что это трудно сделать, а в том что способов для выравнивания элементов по центру очень много и бывает достаточно сложно выбрать из них подходящий.
Давайте выстроим все возможные решения в виде древовидной схемы и будем надеяться, что это упростит нашу задачу.
Итак, мне нужно выравнять элемент по центру.
Горизонтальное выравнивание
Выравнивание по центру строкового или строково-* элемента
Выравнивать по центру строковые элементы внутри блочного родительского элемента можно достаточно просто:
Это будет работать для inline , inline-block , inline-table , inline-flex , и т. д.
Выравнивание по центру блочного элемента
Выравнять по центру блочный элемент вы можете установив свойствам margin-left и margin-right значение auto (у него также должна быть задана ширина, иначе элемент просто займёт всю ширину контента и не будет необходимости в выравнивании). Чаще всего это делается с помощью сокращённого свойства, вот так:
Это будет работать независимо от того какая ширина установленная у блочного элемента или его родителя.
Обратите внимание, что вы не сможете обтекать элемент выравненный по центру таким способом. Однако и для этого есть трюк.
Выравнивание по центру нескольких блочных элементов
Если есть два или более блочных элементов, которые вам нужно выравнять горизонтально по центру в пределах одной строки, то возможно вам лучше изменить их тип отображения. Ниже приведён пример изменения их типа отображения на inline-block и пример с Flexbox:
Если эти несколько блоков расположены на разных строках, то техника с автоматическими отступами по прежнему прекрасна:
Вертикальное выравнивание
Вертикальное выравнивание по центру в CSS немного сложнее.
Выравнивание по центру строкового или строково-* элемента
Выравнивание элемента с одной строкой
Иногда строковые/текстовые элементы могут выравниваться по центру просто потому что у них одинаковое значения для свойств padding-top и padding-bottom .
Если для вас по каким-то причинам padding — это не вариант, а вы пытаетесь выровнять по центру некоторый текст и точно знаете, что он не будет обёрнут чем-то ещё, то есть есть небольшой трюк, суть которого заключается в том чтобы установить свойство line-height равным значению высоты элемента.
Выравнивание многострочного элемента
Одинаковые отступы сверху и снизу могут создать эффект выравнивания по центру и для многострочных элементов, но если это не сработает, то возможно что элемент в котором находится текст является ячейкой таблицы, либо такое его поведение явно задано со помощью CSS. В данном свойство vertical-align обрабатывает это, в отличии от того что оно обычно обрабатывает выравнивание элементов внутри строки.
Если это что-то похожее на таблицу, возможно вы сможете использовать Flexbox ? Отдельный Flex-элемент может быть легко расположен по центру внутри Flex-контейнера.
Помните, что это на самом деле актуально когда у контейнера есть фиксированная высота ( px , % , и другие), вот почему здесь у контейнера задана высота.
Если обе техники приведённые выше нельзя применить, вы можете использовать технику «призрачного элемента», в которой псевдоэлемент с высотой в 100% размещается внутри контейнера и тех выравнивается вертикально по центру него.
Выравнивание по центру блочного элемента
Выравнивание элемента с известной высотой
Довольно часто мы не можем знать высоту, по многим причинам: если изменяется ширина, текст может форматироваться и изменять высоту. Разная стилизация текста может изменять высоту. Разный размер шрифта может изменить высоту. Элементы с фиксированным соотношением сторон, такие как изображения, могут изменять высоту при изменении собственных размеров и т.д.
Но если вы знаете высоту элемента, то можете выравнивать по центру вот так:
Выравнивание элемента с неизвестной высотой
Даже если вы не знаете высоту элемента, его всё ещё можно протолкнуть на 50% высоты его родителя, а после поднять на 50% его собственной высоты:
Выравнивание элемента с помощью Flexbox
Небольшой сюрприз, это можно очень просто сделать с помощью Flexbox.
Горизонтальное и вертикальное выравнивание
Вы можете комбинировать представленные выше техники для того чтобы получить идеально выравненные по центру элементы. Но обычно их можно разделить на 4 группы:
Выравнивание элемента с фиксированной шириной и высотой
Использование отрицательных отступов ( maring ) равных половине этой ширины и высоты после абсолютного позиционирования элемента 50% / 50% выравняют элемент по центру. У этого способа достаточно хорошая кроссбраузерная поддержка:
Выравнивание элемента с неизвестной шириной и высотой
Если вы не знаете ширину или высоту элемента, то можете использовать свойство transform и отрицательный translate в 50% в обоих направлениях (в зависимости от текущей ширины / высоты элемента) до центра:
Выравнивание элемента с помощью Flexbox
Чтобы выровнять элемент по центру с помощью Flexbox вам нужно использовать два свойства центрирования:
Выравнивание элемента с помощью CSS Grid
Это просто небольшой трюк (присланный Lance Janssen), который в большей степени будет работать для одного элемента:
<center>: элемент центрированного текста
Устарело: эта функция больше не рекомендуется. Хотя некоторые браузеры могут по-прежнему поддерживать его, возможно, он уже был удален из соответствующих веб-стандартов, может быть удален или может быть сохранен только в целях совместимости. Избегайте его использования и, если возможно, обновите существующий код; см. таблицу совместимости внизу этой страницы, чтобы принять решение. Имейте в виду, что эта функция может перестать работать в любой момент.
<center> HTML — элемент представляет собой элемент уровня блока , который отображает его уровня блока или инлайн содержимое по центру в горизонтальном направлении в пределах содержащего его элемента. Контейнер обычно, но не обязательно, <body> .
Этот тег устарел в HTML 4 (и XHTML 1) в пользу свойства CSS text-align , которое можно применить к элементу <div> или к отдельному элементу <p> . Для центрирования блоков используйте другие свойства CSS, такие как margin-left и margin-right , и установите для них значение auto (или установите для margin значение 0 auto ).