CSS Выравнивание текста
CSS Выравнивание и направление текста
В этой главе вы узнаете о следующих свойствах:
text-aligntext-align-lastdirectionunicode-bidivertical-align
Горизонтальное выравнивание текста
Свойство text-align используется для установки выравнивания текста по горизонтали.
Текст может быть выровнен по левому или правому краю, по центру или выровнен по ширине.
В следующем примере показаны 3 выровненных по центру и выровненных по левому и правому краю текста (выравнивание по левому краю по умолчанию, если направление текста слева направо, и выравнивание по правому краю по умолчанию, если направление текста справа налево):
Когда, для свойства 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 можно использовать для изменения направления текста элемента:
Вертикальное выравнивание текста
Свойство 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 | Задает вертикальное выравнивание элемента |