6.1 Свойство text-align
Выравнивание текста — это практически самый важный аспект стилизации веб-страниц, который позволяет контролировать, как текст располагается в контейнерах. CSS предоставляет два основных свойства для выравнивания текста: text-align и vertical-align. Эти свойства позволяют управлять горизонтальным и вертикальным выравниванием текста соответственно.
Свойство text-align управляет горизонтальным выравниванием текста внутри элемента блока. Оно определяет, как текст выравнивается по отношению к границам элемента.
Значения
left: выравнивание текста по левому краю (по умолчанию для текста слева направо)right: выравнивание текста по правому краю (по умолчанию для текста справа налево)center: центрирование текстаjustify: выравнивание текста по левому и правому краям, добавляя пробелы между словами для равномерного распределения текста по всей ширине контейнераstart: выравнивание текста по началу (левому или правому краю в зависимости от направления текста)end: выравнивание текста по концу (правому или левому краю в зависимости от направления текста)
Пример использования:
.left {
text-align: left;
}
.right {
text-align: right;
}
.center {
text-align: center;
}
.justify {
text-align: justify;
}
<body>
<p class="left">Этот текст выровнен по левому краю.</p>
<p class="right">Этот текст выровнен по правому краю.</p>
<p class="center">Этот текст центрирован.</p>
<p class="justify">Этот текст выровнен по ширине. Он будет растянут так, чтобы текст занимал всю ширину контейнера.</p>
</body>
6.2 Свойство vertical-align
Свойство vertical-align управляет вертикальным выравниванием элемента по базовой линии его родителя. Оно чаще всего используется для выравнивания встроенных элементов, таких как изображения, строки текста или таблицы, по вертикали в строке текста или другом контейнере.
Значения:
baseline: выравнивание по базовой линии родителя (значение по умолчанию)sub: выравнивание как подстрочный индексsuper: выравнивание как надстрочный индексtext-top: выравнивание по верху шрифта родителяtext-bottom: выравнивание по низу шрифта родителяmiddle: выравнивание по середине родителяtop: выравнивание по верху контейнераbottom: выравнивание по низу контейнера- Процентное значение: смещение элемента на указанный процент относительно высоты строки
Пример использования:
.container {
height: 100px;
border: 1px solid #000;
}
.baseline {
vertical-align: baseline;
}
.sub {
vertical-align: sub;
}
.super {
vertical-align: super;
}
.text-top {
vertical-align: text-top;
}
.text-bottom {
vertical-align: text-bottom;
}
.middle {
vertical-align: middle;
}
.top {
vertical-align: top;
}
.bottom {
vertical-align: bottom;
}
.percent-50 {
vertical-align: 50%;
}
<body>
<div class="container">
<span class="baseline">baseline</span>
<span class="sub">sub</span>
<span class="super">super</span>
<span class="text-top">text-top</span>
<span class="text-bottom">text-bottom</span>
<span class="middle">middle</span>
<span class="top">top</span>
<span class="bottom">bottom</span>
<span class="percent-50">50%</span>
</div>
</body>
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ