Свойство CSS text-align

Свойство CSS text-align отвечает за горизонтально выравнивание текста, а также картинок и других элементов. У свойства есть 4 возможных варианта выравнивания.

Синтаксис CSS text-align

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

Где:

  • center – выравнивание по центру области (например ширина области 500 пикселей, значит будет выравнивание по линии 250 пикселей)
  • justify – растягивание текста по всей ширине области
  • left – выравнивание по левому краю
  • right – выравнивание по правому краю
  • inherit – принять значение предка (родителя)

Чаще всего эти свойства применяются в блоках <div> и абзацах <p>.

Примечание:

Есть также свойство vertical-align, которое отвечает за вертикальное выравнивание.

Как сделать выравнивание текста в html

Пример №1. Выравнивание текста по левому краю

Выравнивание текста по левому краю. Действуют по умолчанию.

<html>
<head>
<style>
.align_left{
border: 1px solid #aaa;
background: #FFDEAD;
padding: 3px;
text-align: left;
}
</style>
</head>
<body>
<div class="align_left">Выравнивание текста по левому краю</div>
</body>
</html>

На странице преобразуется в следующее

Выравнивание текста по левому краю





Пример №2. Выравнивание текста и картинки по центру

Выравнивание текста по центру. Зачастую используются для заглавия статей или для вывода картинок по центру.

<html>
<head>
<style>
.align_center{
border: 1px solid #aaa;
background: #FFDEAD;
padding: 3px;
text-align: center;
}
</style>
</head>
<body>
<div class="align_center">Выравнивание текста по центру</div>
<div class="align_center"><img src="foto.jpg"></div>
</body>
</html>

На странице преобразуется в следующее

Выравнивание текста по левому краю

Пример №3. Выравнивание текста по правому краю

Выравнивание текста по правому краю.

<html>
<head>
<style>
.align_right{
border: 1px solid #aaa;
background: #FFDEAD;
padding: 3px;
text-align: right;
}
</style>
</head>
<body>
<div class="align_right">Выравнивание текста по правому краю</div>
</body>
</html>

На странице преобразуется в следующее

Выравнивание текста по правому краю






Пример №4. Выравнивание текста по ширине всей области

Выравнивание текста по всей ширине. Получается, что выравнивание происходит и полевому, и по правому краю. Браузер автоматически добавляет пробелы.

<html>
<head>
<style>
.align_justify{
border: 1px solid #aaa;
background: #FFDEAD;
padding: 3px;
text-align: justify;
}
</style>
</head>
<body>
<div class="align_justify">Выравнивание текста по ширине всей области</div>
</body>
</html>

На странице преобразуется в следующее

Выравнивание текста по ширине всей области

Иногда text-align: justify; может не работать. Это связано с наследованием и даже с работой браузера. В целом не рекомендуется использовать этот параметр.

Примечание

Вместо свойства text-align можно также использовать атрибут align, который пишется вместе с тегом. Его можно использовать у различных тегов. Например:

<div align="center">Выравнивание по центру</div>
<p align="justify">Выравнивание текста по ширине всей области</p>
<table align="right">
<tr align="center">
...
</tr>
...
</table>

Разница в тегах <div> и <p> в том, что последний делает переход на новую строку (вертикальный отступ), а div не делает.




Читайте также:

• Свойство text-align

• Свойство font

• font-weight

• Свойство display

• Свойство transform

• Как сделать рамку элементов border

• Как сделать фон на сайте html

• Как сделать анимацию в html

• Свойство text-indent


← Перейти в каталог CSS уроков

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.