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%; >
Выравнивание текста
Выравнивание текста определяет его внешний вид и ориентацию краев абзаца и может выполняться по левому краю, правому краю, по центру или по ширине. В табл. 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. Выравнивание текста по правому и левому краю
В данном примере выравнивание заголовка происходит по центру окна браузера, выделенного абзаца по правому краю, а основного текста — по левому краю.
Выравнивание текста
Выравнивание текста определяет его внешний вид и ориентацию краев абзаца и может выполняться по левому краю, правому краю, по центру или по ширине. Наиболее распространенный вариант — выравнивание по левому краю, когда слева текст сдвигается до края, а правый остается неровным. Выравнивание по правому краю и по центру в основном используется в заголовках и подзаголовках. Следует иметь в виду, что при использовании выравнивания по ширине, в тексте между словами могут появиться большие интервалы, что не очень красиво.
Для установки выравнивания текста обычно используется тег параграфа
с атрибутом align , который определяет способ выравнивания. Также блок текста допустимо выравнивать с помощью тега с аналогичным атрибутом align . Он может принимать следующие значения:
- left — выравнивание по левому краю, задается по умолчанию;
- right — выравнивание по правому краю;
- center — выравнивание по центру;
- justify — выравнивание по ширине (одновременно по правому и левому краю). Это значение работает только для текста, длина которого более, чем одна строка.
Атрибут align можно применять как для текста, так и для заголовков (пример 7.4).
Пример 7.4. Способы выравнивания текста
Как поймать льва? Метод перебора
Делим пустыню на ряд элементарных участков, размер которых совпадает с габаритными размерами льва, но при этом меньше размера клетки. Далее простым перебором определяем участок, в котором находится лев, что автоматически приводит к его поимке.
Метод дихотомии
Делим пустыню на две половины. В одной части - лев, в другой его нет. Берем ту половину, в которой находится лев, и снова делим ее пополам. Так повторяем до тех пор, пока лев не окажется пойман.
Результат данного примера показан на рис. 7.4.
Рис. 7.4. Вид текста при его выравнивании
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?- Как добавить иконку сайта в адресную строку браузера?
- Как добавить фоновый рисунок на веб-страницу?
- Как сделать обтекание картинки текстом?
- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
- Как разместить элементы списка горизонтально?
- Как убрать подчеркивание у ссылок?
- Как убрать маркеры в маркированном списке?
- Как изменить расстояние между строками текста?
- Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
- Как открыть ссылку в новом окне?
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?Популярные задачи
- TEX
- Отступы между блоков
- Андроид в тени
- Ссылка как кнопка
- Вложенные списки
- Форма регистрации
- Объединение ячеек таблицы
- Обязательные поля формы
- Цвет и фон в таблице
- Асуанская плотина
- Батарейка
- Заголовки