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

Многие текстовые элементы на веб-странице нужно выравнивать по центру. Чаще всего заголовки. Давайте посмотрим, как делается в css выравнивание текста по центру.

Свойство text-align

За это отвечает свойство text-align и оно имеет четыре значения:

• Left – выравнивание текста по левому краю элемента, в котором он расположен
• Right – по правому краю, но при этом направление текста остается неизменным
• Center – по центру. То есть то, что нам нужно. Никаких дополнительных параметров задавать не нужно – браузер сам поставит текст ровно по центру на разных разрешениях экранов
• Justify – выравнивание по ширине, когда в каждой строке слова растягиваются так, чтобы занять всю ее ширину

Например, у нас есть произвольный текст с заголовком:

<h1>Заголовок</h1>
<p>Абзац</p>
<p>Абзац</p>
<p>Абзац</p>

Чтобы выравнять наш заголовок (h1) по центру, нужно написать так:

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

Text-align не действует как свойство float. Если text-align применить к блочному элементу с текстом, то блок не потеряет своего поведения. Будет прижат именно текст в нем, а не сам блок. Заметьте, это отличается от свойства float, которое отправляет вправо или влево весь элемент целиком.