Реальный пиарHTMLУроки HTML → Выравнивание элементов в HTML

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

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">
</center>
<div align = "right">
<h1>Заголовок 1-го уровня, выравненный по правому краю</h1>
<br>
<img src = "Водяные лилии.jpg" width = "150" height = "150">
</div>
</body>
</html>


Источник: http://myrusakov.ru

Рекомендуем



Списки HTML В принципе, Вы уже можете создавать сайты на HTML, потому что элементарная база по HTML у Вас уже имеется, хотя, разумеется, изучать дальше необходимо, просто уже можно потихоньку начинать создавать сайт


Создание форм в HTML Я абсолютно уверен, что, бегая по Интернету, Вы ни раз встречали различные формы, например, форму регистрации, форму входа в систему, форму обратной связи и многие-многие другие HTML формы


HTML-теги для текста Как видите, снова ничего сложного не было, и это неудивительно, ведь это основные знания по HTML, которыми обладает любой уважающий себя Web-мастер