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

Выравнивание элементов в HTML

До сих пор мы с Вами выравнивали элементы только по левому краю. Точнее, мы с Вами вообще этим не занимались, а сам браузер по умолчанию выравнивает элементы по левому краю. Разумеется, было бы слишком скучно выравнивать всё по левому краю. Поэтому существуют различные способы выравнивания по центру и по правому краю.

Выравнивание элементов — это самые основы HTML, которые просто необходимо знать при создании интернет сайтов. Первое, что необходимо сделать — это набрать HTML-код простейшей страницы.

Ещё когда-то давно появился тег <center> я сейчас Вам не советую его применять, ввиду наличия более современных способов, но не упомянуть я о нём не могу. Использовать его очень и очень просто. Всё, что Вам необходимо выравнять по центру, Вы помещаете внутри этого тега. Вот, например, тут мы выравниваем заголовок 1-го уровня по центру.

<center>
<h1>Заголовок 1-го уровня, выравненный по центру</h1>
</center>

Можно добавить картинку, выравненную также по центру, также давайте перейдём на следующую строку с помощью тега <br>:

<center>
<h1>Заголовок 1-го уровня, выравненный по центру</h1>
<br>
<img src = «Водяные лилии.jpg» width = «150» height = «150»>
</center>

Это был тег <center>, который уже устарел, вдобавок, вопреки Вашим ожиданиям тегов <left> и <right> просто не существует. Допустим, по левому краю выравнивается по умолчанию, по центру выравнивается с помощью тега <center>, но как же быть с правым?

Чтобы решить эту проблему разработчики придумали универсальный способ выравнивания элементов HTML. Способ заключается в использовании так называемых контейнеров, которые создаются с помощью тега <div>. То есть всё, что необходимо поместить в определённый контейнер помещается внутри тега <div>. А уже у этого тега есть атрибут «align», значение которого и определяет положение данного контейнера. Бывают три значения: «left», «center», «right». По умолчанию, стоит «left», впрочем, думаю, что Вас это не удивляет.

Давайте сейчас напишем тот же HTML-код, но с использованием контейнеров, вдобавок, давайте выравняем не по центру, а по правому краю.

<div align = «right»>
<h1>Заголовок 1-го уровня, выравненный по правому краю</h1>
<br>
<img src = «Водяные лилии.jpg» width = «150» height = «150»>
</div>

Как видите, всё работает. Советую Вам также поменять значения атрибута «align», чтобы посмотреть на другие виды выравнивания содержимого контейнеров.

Другой способ выравнивания элементов HTML — это таблицы, но эта тема заслуживает отдельного разговора, поэтому поговорим о ней в одной из следующих статей.

А пока Ваша страница должна выглядеть так:

<html>
<head>
</head>
<body>
<center>
<h1>Заголовок 1-го уровня, выравненный по центру</h1>
<br>
<img src = «Водяные лилии.jpg» width = «150» height = «150»>

Выравнивание текста 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, а при заданной ширине, вы видите результат работы этого значения. Всего Вам доброго!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *