www html, html уроки, html теги, css, верстка
Уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > Уроки > Имаги > Выравнивание рисунков

Выравнивание рисунков

контентовая версия  

Для рисунков можно указывать их положение относительно контента или других рисунков на web-странице. Способ выравнивания рисунков задается параметром align тега <IMG>. В табл. 1 перечислены возможные значение этого параметра и результат его использования.

Табл. 1. Способы выравнивания Имаги
Значение align Описание Пример
bottom Нижняя граница Имаги выравнивается по базовой линии контентовой строки. Это значение установлено по умолчанию. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
left Изображение располагается по левоой стороне родительского элемента. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
middle Середина Имаги выравнивается по базовой линии текущей строки контента. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
right Изображение выравнивается по правой стороне родительского элемента. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
top Верхняя граница Имаги выравнивается по самому высокому элементу текущей строки. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Наиболее популярны параметры left и right, поскольку они не только выравнивают изображение по краю окна браузера, но и задают обтекание контента вокруг Имаги. Чтобы контент не прилегал плотно к рисунку, рекомендуется в теге <IMG> добавляем параметр hspace и vspace, задающих расстояние до контента в пикселах (пример 1).

Пример 1. Обтекание контента вокруг рисунка

Валидный HTML
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Выравнивание рисунка по левоой стороне</title>
</head>
<body>

<p><img src="sample.gif" width="50" height="50" hspace="10" vspace="10" align="left" alt="Пример">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

Результат действия данного примера показан ниже.

Рис. 1

Рис. 1. Выравнивание Имаги по левоой стороне

Статья опубликована: 06.09.2009 Последнее обновление: 16.04.2009
Поиск по сайту
Имаги
Разделы
Теги по теме

IMG
Тег IMG предназначен для отображения на web-странице рисунков в графическом формате GIF, JPEG или PNG.

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект