Выравнивание элементов в 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>С уважением, Михаил Русаков.
P.S. Если Вы хотите узнать больше по HTML, то посмотрите мой бесплатный курс с примером создания сайта на HTML: http://srs.myrusakov.ru/html
-
Создано 28.04.2010 17:08:49
-
Михаил Русаков
Комментарии (17):
А как задать определенные координаты объекту?
Ответить
Это можно сделать только через CSS.
Ответить
Спасибо за ответ, Михаил. Мне до этого еще далеко!)) И спасибо за сайт, действительно доступным языком написано.
Ответить
А как в css прописывается выравнивание картинки по центру?
Ответить
text-align: center;
Ответить
Что не так? body { margin-top: 50px; padding: 0; background: #787878; text-align: justify; font-family: Verdana, Georgia, Times, serif; font-size: 14px; color: #616161; img text-align: center; }
Ответить
Не так синтаксис CSS: http://myrusakov.ru/sintaksis-css.html Также не к img надо свойство text-align применять, а к родительскому контейнеру.
Ответить
Михаил подскажите при переносе вправо цифры списка остались слева <div align = "right"> <ol> <li><h1>проба</h1></li> <li><h1>проба</h1></li> </ol> </div>
Ответить
ol - это блочный элемент, его надо через CSS переносить, например, через float.
Ответить
Как создать два овала (или круга) и поместить в них текст, ссылки и т.д.? Что то вроди таблиц с закруглёнными краями, но мне нужно что-то на подобии яиц. Это возможно? Как?
Ответить
http://myrusakov.ru/css-round-angle.html
Ответить
Доброго времени суток, Михал. Скажите, как быть в случае, если требуется выровнять список, например, по правому краю? Я думал что это должно работать таким образом: <div align = "right"> <ul> <li>Во-первых,... <li>Во-вторых,... </ul> </div> Но в данном случае "кружки" остаются в левой стороне, а по правому краю выравнивается только текст. Как добиться того, что бы и метки("кружочки") выравнивались вместе с текстом? Спасибо.
Ответить
ul {float: right;} - попробуйте поставить.
Ответить
Я правильно понимаю, что это CSS?
Ответить
Да.
Ответить
Михаил,подскажите пожалуйста,что делать если кириллицу на самом сайте он показывает непонятными символами,а с английскими в исходном коде всё нормально
Ответить
вставь этот код в head:<meta http-equiv="content-Type" content="text/html; charset=utf-8">
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.