Свойство text-align устанавливает выравнивание текста: по левому краю, по правому, по центру, по левому и правому краям одновременно.

Синтаксис

селектор {
	text-align: center | left | right | justify | auto | start | end | inherit;
}

Значения

Значение Описание
center По центру.
left По левому краю.
right По правому краю.
justify Одновременно и по правому краю, и по левому.
auto Не изменяет выравнивание элемента (значение по умолчанию).
start Равно left, если текст идет слева направо и right, когда текст идет справа налево (арабский язык и т.п.).
end Равно right, если текст идет слева направо и left, когда текст идет справа налево.
inherit Наследует значение родителя.

Значение по умолчанию: auto. В большинстве случаев по умолчанию текст выровнен по левому краю (в арабском языке - по правому). Однако, есть исключения, например, текст в th будет выровнен по центру.

Примеры

Пример . Значение left

p {
	text-align: left;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример . Значение right

p {
	text-align: right;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример . Значение center

p {
	text-align: center;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt.
Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример . Значение justify

p {
	text-align: justify;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.