Выравнивание рисунков
Для рисунков можно указывать их положение относительно контента или других рисунков на web-странице. Способ выравнивания рисунков задается параметром align тега <IMG>. В табл. 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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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. Выравнивание Имаги по левоой стороне
| Статья опубликована: 06.09.2009 | Последнее обновление: 16.04.2009 |