Выравнивание текста CSS
Сегодняшней темой, которую мы затронем - является выравнивание текста в CSS. Данная тема будет довольно легкой, и короткой, поэтому проблем в ее изучении у Вас совсем не возникнет. В CSS, присутствует одно интересное свойство, под названием text-align, при помощи которого нам предоставляется возможность выравнивания текста. Благодаря этому свойству, мы можем выравнивать нужный нам для форматирования текст по горизонтали. Прежде чем приступить к разбору основных значений данного свойства, хотелось бы сказать, что по умолчанию текст имеет выравнивание по левому краю. Ну а теперь начнем разбирать значения. Первое значение, оно же значение по умолчанию - left, устанавливает выравнивание текста по левому краю, при этом значении правый край не выравнивается, а получается некая структура лестницы. Второе значение - right, оно аналогично первому, только выравнивание происходит с правой стороны, а лестница образуется с левой стороны. Следующее значение - center, выравнивает текст по центру окна браузера (если не задана фиксированная ширина родительского элемента, например блока), если ширина задана, тогда выравнивание текста происходит по центру этого блока. Последнее значение - justify, означающее, что выравнивание будет производиться и с левой и с правой стороны одновременно. В данном случае формирования лестницы не будет с обеих сторон. Для достижения такого выравнивания возможны различные расстояния между словами.
<html>
<head>
<title>Свойство text-align</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<p class="right">Выравнивание текста по правому краю</p>
<p class="center">Выравнивание текста по центру</p>
<p class="justify">Выравнивание с обеих сторон, для данного выравнивания необходимо написать немного больше текста, чем в предыдущих примерах.</p>
</body>
</html>
При помощи классов задаем определенные css стили:
.right {
text-align: right;
}
.center {
text-align: center;
}
.justify {
text-align: justify;
width: 300px;
}
Результат, которого мы добились:
Хочу пояснить лишь следующее, в третьем примере, когда мы выравнивали текст при помощи значения justify, мы установили фиксированную ширину для абзаца. Сделано это было для того, чтобы показать Вам как работает данное значение, если не указывать ширину, тогда текст получится в одну строку, и Вы не поймете принцип работы justify, а при заданной ширине, вы видите результат работы этого значения. Всего Вам доброго!
