Как выровнять текст на веб-странице в HTML или CSS

Любой текст может быть выровнен по левому краю, по центру или справа на веб-странице. Изображения также могут быть выровнены на веб-странице так же, как текст. Ниже приведены примеры выравнивания текста и изображений по левому краю, по центру и по правому краю.

Совет: если какое-либо выравнивание текста не работает, убедитесь, что другие классы или стили CSS, примененные к тому же элементу или содержащему элемент, не противоречат обоснованию, которое вы пытаетесь сделать.

Примечание. С этими примерами и большей частью выравнивания текст выравнивается в элементе, содержащем текст. Текст может быть центрирован в HTML-элементе div и выровнен по левому краю на остальной части веб-страницы. Кроме того, все, что содержится в теге, содержащем обоснование CSS (например, изображение), также выравнивается.

Примеры выравнивания

Выравнивание по левому краю

Выравнивание по вкладке

Центр выровнен

С правой стороны

Выровненный по левому краю пример

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

HTML код

Выравнивание по левому краю

Совет: см. Ниже дополнительные советы по настройке выравнивания, отступов и полей элемента.

Пример выравнивания по вкладке

Хотя выравнивания текста на вкладке нет, к элементу может быть добавлено левое поле, как показано ниже.

HTML код

Выравнивание по вкладке

Совет: см. Ниже дополнительные советы по настройке выравнивания, отступов и полей элемента.

Выровненный по центру пример

Используя атрибут text-align, вы можете центрировать любой текст или изображение в элементе, как показано в примере ниже.

HTML код

Центр выровнен

Совет: см. Ниже дополнительные советы по настройке выравнивания, отступов и полей элемента.

Выровненный справа пример

Используя атрибут text-align, вы можете центрировать любой текст или изображение в элементе, как показано в примере ниже.

HTML код

С правой стороны

Совет: в качестве альтернативы вы можете использовать CSS для выравнивания изображения по правому краю на веб-странице.

Совет: см. Ниже дополнительные советы по настройке выравнивания, отступов и полей элемента.

Дополнительные советы по выравниванию

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

  1. Дополнительное поле может быть добавлено к любому из вышеперечисленных стилей, если вам требуется дополнительный отступ или вы хотите больше отступов. Например, вы можете применить поле margin-right к выровненному по правому краю примеру, чтобы переместить текст дальше в элемент.
  2. Если вы хотите более отзывчивую страницу, обязательно отрегулируйте или удалите выравнивание по левому или правому краю при просмотре на меньшем экране.