Пример
Устанавливает выравнивание текста для элементов h1, h2 и h3:<html>
<head>
<meta charset="utf-8" />
<style>
h1 { text-align:center; }
h2 { text-align:left; }
h3 { text-align:right; }
</style>
</head>
<body>
<h1>Это заголовок 1</h1>
<h2>Это заголовок 2</h2>
<h3>Это заголовок 3</h3>
</body>
</html>
Определение и использование
Свойство text-align указывает горизонтальное выравнивание текста в элементе.
| Значение по умолчанию: | left если направление ltr, и right если направление rtl |
|---|---|
| Унаследованный: | да |
| Версия: | CSS1 |
| Синтакс JavaScript: | object.style.textAlign="right" |
Поддержка браузеров
Свойство text-align поддерживается во всех ведущих браузерах.
Примечание: Значение "inherit" не поддерживается в IE7 и более ранних версиях. IE8 требует !DOCTYPE. IE9 поддерживает "inherit".
Значения свойства
| Значение | Описание | Играйте |
|---|---|---|
| left | Выравнивание текста влево | Играйте » |
| right | Выравнивание текста вправо | Играйте » |
| center | Отцентровывание текста | Играйте » |
| justify | Вытягивает строки так, чтобы каждая строка имела одинаковую ширину (как в газетах и журналах) | Играйте » |
| inherit | Указывает, что значение свойства text-align должно быть унаследовано от родительского элемента |
Больше примеров
Пример 2
Этот пример демонстрирует более продвинутое выравнивание текста.<html>
<head>
<meta charset="utf-8" />
<style>
h1 { text-align:center; }
p.date { text-align:right; }
p.main { text-align:justify; }
</style>
</head>
<body>
<h1>Пример выравнивания текста CSS</h1>
<p class="date">Май, 2010</p>
<p class="main">Рассерженный вконец глупыми приставаниями гробовщиков,
Ипполит Матвеевич быстрее обыкновенного взбежал на крыльцо, раздраженно соскреб о
ступеньку грязь и, испытывая сильнейшие приступы аппетита, вошел в сени. Навстречу ему из
комнаты вышел пышущий жаром священник церкви Фрола и Лавра отец Федор. Подобрав
правой рукой рясу и не обращая внимания на Ипполита Матвеевича, отец Федор пронесся к выходу.
</p>
<p><b>Примечание:</b> Измените размер окна браузера, чтобы увидеть как значение "justify" работает.</p>
</body>
</html>
Была ли эта информация полезной?
