Статьи
Выравнивание изображений
Для изображений можно указывать их положение относительно текста или других изображений на веб-странице. Способ выравнивания изображений задается параметром align тега <IMG>. В табл. 1 перечислены возможные значение этого параметра и результат его использования.
| Значение align | Описание | Пример |
|---|---|---|
| absbottom | Нижняя граница изображения выравнивается по самому нижнему краю текущей строки. | Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit... |
| absmiddle | Середина изображения выравнивается по средней линии текста. | Lorem ipsum dolor sit amet,
consectetuer adipiscing elit... |
| baseline или 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... |
| texttop | Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки. | Lorem ipsum dolor sit amet,
consectetuer adipiscing elit... |
| top | Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. | Lorem ipsum dolor sit amet,
consectetuer adipiscing elit... |
Замечание
Хотя все значения параметра align поддерживаются браузерами, аргументы absbottom, absmiddle, baseline и texttop не описаны в спецификации HTML 4.
Наиболее популярны параметры left и right, поскольку они не только выравнивают изображение по краю окна браузера, но и задают обтекание текста вокруг изображения. Чтобы текст не прилегал плотно к рисунку, рекомендуется в теге <IMG> добавить параметр hspace и vspace, задающих расстояние до текста в пикселах (пример 1).
Пример 1. Обтекание текста вокруг рисунка
<html>
<body>
<img src="sample.gif" width="50" height="50" hspace="10" vspace="10" align="left">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.
</body></html>
Результат действия данного примера показан ниже.
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.