До сих пор мы с Вами выравнивали элементы только по левому краю. Точнее, мы с Вами вообще этим не занимались, а сам браузер по умолчанию выравнивает элементы по левому краю. Разумеется, было бы слишком скучно выравнивать всё по левому краю. Поэтому существуют различные способы выравнивания по центру и по правому краю.
Выравнивание элементов - это самые основы 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">
</center>
<div align = "right">
<h1>Заголовок 1-го уровня, выравненный по правому краю</h1>
<br>
<img src = "Водяные лилии.jpg" width = "150" height = "150">
</div>
</body>
</html>