text-align
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Резюме
text-align
CSS-свойство описывает, как линейное содержимое, наподобие текста, выравнивается в блоке его родительского элемента. text-align
не контролирует выравнивание элементов самого блока, но только их линейное содержимое.
Начальное значение | start , или неназванное значение, которое действует как left , если direction : ltr или как right , если direction : rtl , а если start не поддерживается браузером. |
---|---|
Применяется к | блочные контейнеры |
Наследуется | да |
Обработка значения | как указано, кроме значения match-parent , которое вычисляется вместо значения его родителя direction , а результаты в вычисленном значении left или right |
Animation type | discrete |
Синтаксис
text-align =
start |
end |
left |
right |
center |
justify |
match-parent |
justify-all
text-align: left
text-align: right
text-align: center
text-align: justify
text-align: start
text-align: end
text-align: match-parent
text-align: start end
text-align: "."
text-align: start "."
text-align: "." end
text-align: inherit
Значения
start
Экспериментальная возможность-
Подобно
left
если направление слева направо, иright
если наоборот. end
Экспериментальная возможность-
Подобно
right
если направление слева направо, иleft
если наоборот. left
-
Линейное содержимое выравнивается по левому краю линейного блока.
right
-
Линейное содержимое выравнивается по правому краю линейного блока.
center
-
Линейное содержимое центрируется в линейном блоке.
<string>
Экспериментальная возможность-
Первое появление односимвольной строки - это элемент используемый для выравнивания. Ключевое слово, следует или предшествует, и определяет, как это выравнивается. Это позволяет выравнять численные значения с десятичной точкой, к примеру.
justify
-
Текст выравнивается. Тексту следует выстраивать свои левые и правые границы по левым и правым границам содержимого параграфа.
match-parent
Экспериментальная возможность-
Наподобие
inherit
с различием, что значениеstart
иend
вычисляются в соответствииdirection
и заменяются соответствующимleft
илиright
значением.
Примеры
Живые примеры
div { text-align: center; border:solid; }
p { background:gold; width:22em; }
несколько текста...div { text-align: center; border:solid; }
p { background:gold; width:22em; margin: 1em auto; }
несколько текста...div { text-align:-moz-center; text-align:-webkit-center; border:solid; }
p { background:gold; width:22em; }
несколько текста...
Примечание
Стандартный совместимый способ центрировать сам блок без выравнивания его содержимого, это установка его left и right margin в auto, пример:
margin:auto;
или margin:0 auto;
или margin-left:auto; margin-right:auto;
Спецификации
Specification |
---|
CSS Logical Properties and Values Level 1 # text-align |
CSS Text Module Level 3 # text-align-property |
Совместимость с браузерами
BCD tables only load in the browser