text — align
Выравниваем текст по левому или правому краю. А может быть по центру?
Время чтения: меньше 5 мин
Кратко
Скопировать ссылку «Кратко» Скопировано
text — align выравнивает текст по горизонтали внутри блока.
Если это свойство не задано, то текст выравнивается по левому краю.
Примеры
Скопировать ссылку «Примеры» Скопировано
p text-align: center;>p text-align: center; >
Специальные значения для столбца в таблице:
p text-align: '.'; text-align: '.' center;>p text-align: '.'; text-align: '.' center; >
Выравнивание блока (нестандартный синтаксис):
p text-align: -moz-center; text-align: -webkit-center;>p text-align: -moz-center; text-align: -webkit-center; >
Как пишется
Скопировать ссылку «Как пишется» Скопировано
У text — align есть четыре варианта значений:
- center — выравнивание по центру.
- justify — выравнивание по ширине. Текст растягивается от левого до правого края, между словами появляются большие пробелы.
- left — выравнивание по левому краю (значение по умолчанию).
- right — выравнивание по правому краю.
Не так давно появилось ещё два крайне удобных значения:
- start — текст выровнен по тому краю, по которому принято в текущем языке.
- end — текст выровнен по противоположному краю для текущего языка.
Формулировки сложные, но на самом деле всё просто. Если в русском мы читаем слева направо, то значение start будет выравнивать текст по левому краю, а end — по правому. Но в некоторых языках текст читается наоборот, справа налево. В этому случае start выровняет текст по правому краю, а end по левому. При этом вам ничего не нужно будет изменять. Значения сами подстроятся под текст. Достаточно изменить значение атрибута lang у тега . Эти значения очень удобны, если вы разрабатываете мультиязычные сайты или приложения.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
💡 Значение свойства наследуется.
💡 Значение по умолчанию — left .
💡 Хотите отцентровать блок, не меняя выравнивание внутри него? Добавьте левый и правый отступ margin со значением auto : например, margin : auto , margin : 0 auto , margin — left : auto; margin — right : auto , margin — inline : auto .
💡 Выравнивание текста нельзя анимировать при помощи transition ☹️
Ещё пример
Скопировать ссылку «Ещё пример» Скопировано
div class="left"> div class="content">Выравнивание по левому краюdiv> div> div class="center"> div class="content">Выравнивание по центруdiv> div> div class="right"> div class="content">Выравнивание по правому краюdiv> div>
.left text-align: left;> .right text-align: right;> .center text-align: center;>.left text-align: left; > .right text-align: right; > .center text-align: center; >
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
🛠 Свойство text — align можно использовать не только для выравнивания текста в строчных элементах, но и для выравнивания строчно-блочных ( inline — block ) элементов внутри родителя.
С появлением флексбоксов такое решение теряет свою популярность, но знать о нём стоит.
Простая разметка из родительского блока и трёх строчно-блочных вложенных элементов:
div class="parent"> div class="child">🙈div> div class="child">🙉div> div class="child">🙊div> div>
.parent width: 80%; margin: 0 auto; padding: 25px;> .child display: inline-block; /* Меняем отображение на строчно-блочное */ width: 125px; height: 125px; padding: 25px; text-align: center; /* Выравниваем текст внутри блоков */ font-size: 75px; line-height: 1; font-weight: bold;>.parent width: 80%; margin: 0 auto; padding: 25px; > .child display: inline-block; /* Меняем отображение на строчно-блочное */ width: 125px; height: 125px; padding: 25px; text-align: center; /* Выравниваем текст внутри блоков */ font-size: 75px; line-height: 1; font-weight: bold; >
Добавим элементу .parent свойство text — align : center и элементы .child выровняются по центру родителя:
А если попробовать распределить вложенные элементы равномерно по ширине родителя, задав text — align : justify ?
Ожидаемого поведения не получилось, и вот почему 👇
🛠 У значения justify хитрая логика. Чтобы можно было равномерно распределить элементы внутри родителя нужно задать этому самому родителю пустой строчно-блочный псевдоэлемент с шириной 100%.
.parent::after content: ''; display: inline-block; width: 100%;>.parent::after content: ''; display: inline-block; width: 100%; >
Выравнивание текста в HTML
Выравнивание текста отвечает за его внешний вид, формирование краев абзаца и осуществляется по правому или левому краю, центру или выравнивание по ширине.
Существует три способа выровнять текст с помощью HTML-кода:
- При помощи атрибута тега p;
- Выравнивание по центру при помощи тега center;
- Выравнивание при помощи блоков div.
Выравнивание по краям HTML
По краям текст можно выровнять как при помощи тега p, так и при помощи тега div. Для этого используется атрибут align:
- align=”right” – по правому краю;
- align=”left” – по левому краю;
Конструктор сайтов "Нубекс"
Конструктор сайтов "Нубекс"Здесь первое предложение выравнивается по правому краю при помощи тега p, второе – по левому краю при помощи тега div.
Выравнивание по ширине HTML
По ширине текст также может быть выравнен при помощи тегов p и div:
Конструктор сайтов "Нубекс"
Конструктор сайтов "Нубекс"HTML выравнивание по центру
Выравнивание по центру с помощью HTML, как вы уже догадались, можно осуществить всеми тремя вышеуказанными способами:
Конструктор сайтов "Нубекс"
Конструктор сайтов "Нубекс" Конструктор сайтов "Нубекс" Выравнивание CSS
Конечно, более «красиво» делать выравнивание с помощью CSS. Рассмотрим способ выравнивания текста при помощи CSS:
.right Конструктор сайтов "Нубекс" Здесь происходит выравнивание текста по правому краю при помощи атрибута CSS text-align.
Выравнивание текста
Выравнивание текста определяет его внешний вид и ориентацию краев абзаца и может выполняться по левому краю, правому краю, по центру или по ширине. В табл. 1 показаны варианты выравнивания блока текста.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Наиболее распространенный вариант — выравнивание по левому краю, когда слева текст сдвигается до края, а правый остается неровным. Выравнивание по правому краю и по центру в основном используется в заголовках и подзаголовках. Следует иметь в виду, что при использовании выравнивания по ширине в тексте между словами могут появиться большие интервалы, что не очень красиво.
Для установки выравнивания текста обычно используется тег абзаца
с атрибутом align , который определяет способ выравнивания. Также блок текста допустимо выравнивать с помощью тега с аналогичным атрибутом align , как показано в табл. 2.
| Код HTML | Описание |
|---|---|
| Текст | Добавляет новый абзац текста, по умолчанию выровненный по левому краю. Перед абзацем и после него автоматически добавляются небольшие вертикальные отступы. |
| Текст | Выравнивание по центру. |
| Текст | Выравнивание по левому краю. |
| Текст | Выравнивание по правому краю. |
| Текст | Выравнивание по ширине. |
| Отключает автоматический перенос строк, даже если текст шире окна браузера. | |
| Текст | Разрешает браузеру делать перенос строки в указанном месте, даже если используется тег |
| Текст | Выравнивание по центру. |
| Текст | Выравнивание по левому краю. |
| Текст | Выравнивание по правому краю. |
| Текст | Выравнивание по ширине. |
Выравнивание элементов по левому краю задано по умолчанию, поэтому указывать его лишний раз необходимости нет. Так что align=»left» можно опустить.
Отличие между абзацем (тег
) и тегом в том, что в начале и конце параграфа появляется вертикальный отступ, чего нет в случае использования тега .
Атрибут align достаточно универсален и может применяться не только к основному тексту, но и к заголовкам вроде . В примере 1 показано, как в подобном случае устанавливать выравнивание.
Пример 1. Выравнивание текста
Как поймать льва?
Метод перебора
Делим пустыню на ряд элементарных участков, размер которых совпадает с габаритными размерами льва, но при этом меньше размера клетки. Далее простым перебором определяем участок, в котором находится лев, что автоматически приводит к его поимке.
Метод дихотомии
Делим пустыню на две половины. В одной части - лев, в другой его нет. Берем ту половину, в которой находится лев, и снова делим ее пополам. Так повторяем до тех пор, пока лев не окажется пойман.
Результат примера показан на рис. 1.
Рис. 1. Выравнивание текста по правому и левому краю
В данном примере выравнивание заголовка происходит по центру окна браузера, выделенного абзаца по правому краю, а основного текста — по левому краю.