Свойство text-align, горизонтальное выравнивание текста
Следующее свойство text-align описывает, как выравнивается текст внутри блока по горизонтали (на самом деле не только текст, но об этом в следующем задании).
Свойство может принимать следующие значения:
- left — выравнивание по левому краю блока, это значение по умолчанию;
- right — по правому краю блока;
- center — по центру блока;
- justify — по ширине блока, при этом слова в строке будут размещаться так, чтобы занять равномерно всё пространство строки (пробелы между словами в таком случае становятся неравномерными, так как браузер «растягивает» слова в строке).
Важно помнить, что свойство text-align применяется именно к самому блоку-контейнеру, внутри которого находится текстовый контент:
HTML:Я текст внутри абзаца
CSS: p
На самом деле существует ещё два значения text-align : это выравнивание к началу блока start и выравнивание к концу блока end . Если вы попробуете применить эти значения, то увидите, что эффект от значения start совпадает со значением left , а end делает то же самое, что и right .
Но это не всегда так. Дело в том, что не во всех языках текст пишется слева направо. Например, в японском текст пишется сверху вниз, и в этом случае значения left и right уже не так логичны, как в «европейских» языках.
Именно чтобы сделать CSS-код универсальным для любых направлений написания текста и появились такие значения text-align . Кстати, для управления направлением текста есть специальное свойство — writing-mode.
Перейти к заданию
- index.html Сплит-режим
- style.css Сплит-режим
Выравнивание элементов с помощью Flexbox в HTML
Одна из типичных проблем, с которой сталкиваются разработчики веб-сайтов, заключается в выравнивании элементов на странице. Представьте, что есть список элементов, которые должны быть выровнены по центру, но один элемент должен быть выровнен по правому или левому краю.
ul < padding: 0; margin: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; >li < display: flex; margin: 1px; padding: 5px; background: #aaa; >li:last-child < background: #ddd; /* Как выровнять этот элемент по правому краю? */ >
В этом примере элементы списка «A», «B» и «C» должны быть выровнены по центру, а элемент «D» должен быть выровнян по правому краю.
Решение этой задачи можно найти с помощью свойств flexbox в CSS. Flexbox — это способ расположения элементов в контейнере, обеспечивая возможность их автоматического распределения в зависимости от размера экрана или вьюпорта.
Чтобы выровнять последний элемент списка по правому краю, можно использовать свойство margin-left: auto . Это свойство автоматически добавляет все свободное пространство слева от элемента, тем самым выравнивая его по правому краю.
li:last-child
Теперь элемент «D» выровнен по правому краю, а остальные элементы — по центру.
Flexbox — это мощный инструмент для создания адаптивных веб-страниц. С его помощью можно легко управлять расположением элементов на странице и создавать сложные макеты.