text-align

text — align

Выравниваем текст по левому или правому краю. А может быть по центру?

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

text — align выравнивает текст по горизонтали внутри блока.

Если это свойство не задано, то текст выравнивается по левому краю.

Примеры

Скопировать ссылку «Примеры» Скопировано

 p  text-align: center;> p  text-align: center; >    Скопировать Скопировано Не удалось скопировать   

Специальные значения для столбца в таблице:

 p  text-align: '.'; text-align: '.' center;> p  text-align: '.'; text-align: '.' center; >    Скопировать Скопировано Не удалось скопировать   

Выравнивание блока (нестандартный синтаксис):

 p  text-align: -moz-center; text-align: -webkit-center;> p  text-align: -moz-center; text-align: -webkit-center; >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

У text — align есть четыре варианта значений:

• center — выравнивание по центру.
• justify — выравнивание по ширине. Текст растягивается от левого до правого края, между словами появляются большие пробелы.
• left — выравнивание по левому краю (значение по умолчанию).
• right — выравнивание по правому краю.

Не так давно появилось ещё два крайне удобных значения:

• start — текст выровнен по тому краю, по которому принято в текущем языке.
• end — текст выровнен по противоположному краю для текущего языка.

Формулировки сложные, но на самом деле всё просто. Если в русском мы читаем слева направо, то значение start будет выравнивать текст по левому краю, а end — по правому. Но в некоторых языках текст читается наоборот, справа налево. В этому случае start выровняет текст по правому краю, а end по левому. При этом вам ничего не нужно будет изменять. Значения сами подстроятся под текст. Достаточно изменить значение атрибута lang у тега . Эти значения очень удобны, если вы разрабатываете мультиязычные сайты или приложения.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Значение свойства наследуется.

💡 Значение по умолчанию — left .

💡 Хотите отцентровать блок, не меняя выравнивание внутри него? Добавьте левый и правый отступ margin со значением auto : например, margin : auto , margin : 0 auto , margin — left : auto; margin — right : auto , margin — inline : auto .

💡 Выравнивание текста нельзя анимировать при помощи transition ☹️

Ещё пример

Скопировать ссылку «Ещё пример» Скопировано

   
Выравнивание по левому краю   
Выравнивание по центру   
Выравнивание по правому краю  div class="left"> div class="content">Выравнивание по левому краюdiv> div> div class="center"> div class="content">Выравнивание по центруdiv> div> div class="right"> div class="content">Выравнивание по правому краюdiv> div>    Скопировать Скопировано Не удалось скопировать   

 .left  text-align: left;> .right  text-align: right;> .center  text-align: center;> .left  text-align: left; > .right  text-align: right; > .center  text-align: center; >    Скопировать Скопировано Не удалось скопировать   

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

🛠 Свойство text — align можно использовать не только для выравнивания текста в строчных элементах, но и для выравнивания строчно-блочных ( inline — block ) элементов внутри родителя.

С появлением флексбоксов такое решение теряет свою популярность, но знать о нём стоит.

Простая разметка из родительского блока и трёх строчно-блочных вложенных элементов:

   
🙈 
🙉 
🙊  div class="parent"> div class="child">🙈div> div class="child">🙉div> div class="child">🙊div> div>    Скопировать Скопировано Не удалось скопировать   

 .parent  width: 80%; margin: 0 auto; padding: 25px;> .child  display: inline-block; /* Меняем отображение на строчно-блочное */ width: 125px; height: 125px; padding: 25px; text-align: center; /* Выравниваем текст внутри блоков */ font-size: 75px; line-height: 1; font-weight: bold;> .parent  width: 80%; margin: 0 auto; padding: 25px; > .child  display: inline-block; /* Меняем отображение на строчно-блочное */ width: 125px; height: 125px; padding: 25px; text-align: center; /* Выравниваем текст внутри блоков */ font-size: 75px; line-height: 1; font-weight: bold; >    Скопировать Скопировано Не удалось скопировать   

Добавим элементу .parent свойство text — align : center и элементы .child выровняются по центру родителя:

А если попробовать распределить вложенные элементы равномерно по ширине родителя, задав text — align : justify ?

Ожидаемого поведения не получилось, и вот почему 👇

🛠 У значения justify хитрая логика. Чтобы можно было равномерно распределить элементы внутри родителя нужно задать этому самому родителю пустой строчно-блочный псевдоэлемент с шириной 100%.

 .parent::after  content: ''; display: inline-block; width: 100%;> .parent::after  content: ''; display: inline-block; width: 100%; >    Скопировать Скопировано Не удалось скопировать   

Источник

text-align

The text-align CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box. This means it works like vertical-align but in the horizontal direction.

Try it

Syntax

/* Keyword values */ text-align: start; text-align: end; text-align: left; text-align: right; text-align: center; text-align: justify; text-align: justify-all; text-align: match-parent; /* Character-based alignment in a table column */ text-align: "."; text-align: "." center; /* Block alignment values (Non-standard syntax) */ text-align: -moz-center; text-align: -webkit-center; /* Global values */ text-align: inherit; text-align: initial; text-align: revert; text-align: revert-layer; text-align: unset; 

The text-align property is specified in one of the following ways:

• Using the keyword values start , end , left , right , center , justify , justify-all , or match-parent .
• Using a value only, in which case the other value defaults to right .
• Using both a keyword value and a value.

Values

The same as left if direction is left-to-right and right if direction is right-to-left.

The same as right if direction is left-to-right and left if direction is right-to-left.

The inline contents are aligned to the left edge of the line box.

The inline contents are aligned to the right edge of the line box.

The inline contents are centered within the line box.

The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.

Same as justify , but also forces the last line to be justified.

Similar to inherit , but the values start and end are calculated according to the parent’s direction and are replaced by the appropriate left or right value.

When applied to a table cell, specifies the alignment character around which the cell’s contents will align.

Accessibility concerns

The inconsistent spacing between words created by justified text can be problematic for people with cognitive concerns such as Dyslexia.

Formal definition

Initial value	start , or a nameless value that acts as left if direction is ltr , right if direction is rtl if start is not supported by the browser.
Applies to	block containers
Inherited	yes
Computed value	as specified, except for the match-parent value which is calculated against its parent’s direction value and results in a computed value of either left or right
Animation type	discrete

Formal syntax

text-align =
start |
end |
left |
right |
center |
justify |
match-parent |
justify-all

Examples

Start alignment

HTML

p class="example"> Integer elementum massa at nulla placerat varius. Suspendisse in libero risus, in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque. Nullam est eros, suscipit sed dictum quis, accumsan a ligula. p> 

CSS

.example  text-align: start; border: solid; > 

Источник

text-align

Определяет горизонтальное выравнивание текста в пределах элемента.

Синтаксис

text-align: center | justify | left | right | inherit

text-align: center | justify | left | right | start | end

Значения

center Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно. justify Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами. left Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст. right Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится. auto Не изменяет положение элемента. inherit Наследует значение родителя. start Аналогично значению left , если текст идёт слева направо и right , когда текст идёт справа налево. end Аналогично значению right , если текст идёт слева направо и left , когда текст идёт справа налево.

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Выравнивание текста в браузере Safari

Internet Explorer до версии 7.0 включительно несколько иначе трактует данный пример, чем другие браузеры, выравнивая не только текст, но и блоки (рис. 2).

Рис. 2. Выравнивание текста в браузере Internet Explorer 7

Объектная модель

[window.]document.getElementById(» elementID «).style.textAlign

Браузеры

IE до версии 7.0 включительно выравнивает не только содержимое блочного элемента, но и сам элемент.

Источник

CSS text-align Property

The text-align property specifies the horizontal alignment of text in an element.

Default value:	left if direction is ltr, and right if direction is rtl
Inherited:	yes
Animatable:	no. Read about animatable
Version:	CSS1
JavaScript syntax:	object.style.textAlign=»right» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

Value	Description	Demo
left	Aligns the text to the left	Demo ❯
right	Aligns the text to the right	Demo ❯
center	Centers the text	Demo ❯
justify	Stretches the lines so that each line has equal width (like in newspapers and magazines)	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

Another text-align example:

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник