Выровнять текст по центру: используем гибкие подходы

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

Смотрите видео:

https://vk.com/video-219751701_456239242

VK Видео | YouTube | Rutube

Сложности при центрировании текста

В Taptop есть настройки центровки текста, как и в других редакторах. Но при верстке не всегда очевидно, что текст получился по центру. Даже если на одном разрешении все выглядит, как надо, при изменении размера экрана возможно нарушение выравнивания. Такая ошибка часто встречается у новичков.


На разрешении для компьютера текст по центру, а на смартфоне — не центрирован

Способы выравнивания текста

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

Можно использовать следующие варианты:

1. Через настройки стиля текста для класса

Самый простой способ — задать настройку в стилях текста для класса.

  1. Зайдите в класс и найдите стили текста.
  2. Включите настройку центрирования.


Задаем в стилях класса выравнивание по центру

В этом случае центрирование применится ко всем текстам с этим классом. Поэтому такой способ не всегда подойдет.


Все тексты с классом h1-em выровнены по центру

2. Через локальные стили

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

  1. Перейдите во вкладку локальных стилей.
  2. Задайте тексту выравнивание по центру.


Задаем в локальных стилях выравнивание по центру

В этом случае будет центрирован только тот текст, которому задали выравнивание.


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

Недостаток: при большом количестве текста в проекте сложно отслеживать, какие элементы центрированы, а какие нет.

3. Создание специального класса для центрирования

  1. Создайте дополнительный класс — например, centered-text.
  2. Задайте в нем только один параметр — выравнивание по центру.
  3. Применяйте этот класс к тем текстам, которые должны быть центрированы.


Класс centered-text, в котором задано центрирование

Таким образом, будут центрироваться только те тексты, для которых добавлен этот класс.


Тексты, для которых добавлен класс, выровнены по центру

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

4. Через внешние отступы

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

Для этого задайте элементам следующие параметры:

  • для центрирования — внешние отступы слева и справа auto
  • для выравнивания по левому краю — внешний отступ справа auto
  • для выравнивания по правому краю — внешний отступ слева auto


Внешние отступы слева и справа auto — центрирование элемента
Строчки выровнены по-разному с помощью отступов
5. Через лейаут дочернего элемента

Еще один способ — настройка выравнивания для каждого элемента через опцию Лейаут дочернего элемента у флексбокса.

1. У обертки текста (родительского элемента) установите отображение Flex и вертикальное направление.


Настройки авто-лейаута у родительского элемента
2. Выберите текстовый элемент и в настройкеЛейаут дочернего элемента нажмите на «три точки» и выберите нужное выравнивание  — по левому краю, по центру или по правому краю.


Настройка лейаута дочернего элемента для текста
Строчки выровнены по-разному с помощью лейаута дочерних элементов

Резюме

Центрировать текст можно несколькими способами:

  1. Через стили текста у класса
  2. Через локальные стили текста
  3. С помощью специального класса для центрирования
  4. Через внешние отступы
  5. С помощью лейаута дочернего элемента

Выбирайте способ в зависимости от задачи и предпочтений.