Свойства выравнивания текста
В этой главе вы узнаете о выравнивании и направлении текста и следующих CSS свойствах:
text-aligntext-align-lastdirectionunicode-bidivertical-align
CSS свойство text-align
CSS свойство text-align используется для установки выравнивания текста по горизонтали.
Текст также может быть выровнен по левому или правому краю, по центру или выровнен по ширине.
В следующем примере показаны 3 выровненных по центру и выровненных по левому и правому краю текста (выравнивание по левому краю по умолчанию, если направление текста слева направо, и выравнивание по правому краю по умолчанию, если направление текста справа налево):
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
Попробуйте сами »
Когда для CSS свойства text-align установлено выравнивание по ширине, будет значение "justify", каждая строка растягивается так, чтобы каждая строка имела одинаковую ширину, а левое и правое поля были прямыми (как в журналах и газетах):
div {
text-align: justify;
}
Попробуйте сами »
CSS свойство text-align-last
CSS свойство text-align-last определяет, как выровнять последнюю строку текста.
Выровнять последнюю строку текста по трем элементам <p>:
p.a
{
text-align-last: right;
}
p.b
{
text-align-last: center;
}
p.c
{
text-align-last: justify;
}
Попробуйте сами »
CSS свойства direction и unicode-bidi
CSS свойства direction и unicode-bidi используется для изменения направления текста элемента.
p {
direction: rtl;
unicode-bidi: bidi-override;
}
Попробуйте сами »
CSS свойство vertical-align
CSS свойство 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;
}
Попробуйте сами »
CSS свойства выравнивания/направления
| Свойство | Описание |
|---|---|
| direction | Задает направление текста/направление записи |
| text-align | Задает выравнивание текста по горизонтали |
| text-align-last | Указывает, как выровнять последнюю строку текста |
| unicode-bidi | Используется вместе со свойством direction для установки или возврата того, следует ли переопределять текст для поддержки нескольких языков в одном документе |
| vertical-align | Задает вертикальное выравнивание элемента |