Выравнивание текста CSS
Выравнивание текста
Свойство text-alignиспользуется для установки горизонтального выравнивания текста.
Текст может быть выровнен по левому или правому краю, по центру или по ширине.
В следующем примере показан текст с выравниванием по центру и с выравниванием по левому и правому краю (выравнивание по левому краю используется по умолчанию, если направление текста слева направо, и выравнивание по правому краю по умолчанию, если направление текста справа налево):
Пример
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
Когда для text-alignсвойства установлено значение «по ширине», каждая строка растягивается так, чтобы каждая строка имела одинаковую ширину, а левое и правое поля были прямыми (как в журналах и газетах):
Пример
div {
text-align: justify;
}
Выравнивание текста последним
Свойство text-align-lastуказывает, как выравнивать последнюю строку текста.
Пример
Выровняйте последнюю строку текста в трех элементах <p>:
p.a
{
text-align-last: right;
}
p.b
{
text-align-last: center;
}
p.c
{
text-align-last: justify;
}
Направление текста
Свойства directionи
unicode-bidiможно использовать для изменения направления текста элемента:
Пример
p {
direction: rtl;
unicode-bidi: bidi-override;
}
Вертикальное выравнивание
Свойство vertical-alignустанавливает вертикальное выравнивание элемента.
Пример
Установите вертикальное выравнивание изображения в тексте:
img.a {
vertical-align: baseline;
}
img.b {
vertical-align: text-top;
}
img.c {
vertical-align:
text-bottom;
}
img.d {
vertical-align: sub;
}
img.e {
vertical-align: super;
}