Выравнивание изображений

Для выравнивания изображений используется атрибут align.

align=top – изображение выравнивается по верхнему краю текущей текстовой строки, не меняя позиции по горизонтали. При этом речь идет как о тексте, так и о графике;
align=middle – изображение центрируется по вертикали на базовой линии текущей текстовой строки, не меняя позицию по горизонтали;
align=bottom – нижний край изображения выравнивается по горизонтали на базовой линии текущей текстовой строки;
align=left – изображение смещается к левому краю рабочей зоны, последующий текст сразу же начинает "обтекать" графику;
– то же что и для left, только изображение смещается к правой части рабочей зоны.

Следующий пример показывает различные варианты выравнивания изображений в тексте.

Изображение выравнено по верху <img src="http://www.intuit.ru/img/logo.gif" align="top"> при помощи align="top"

Значение "middle" атрибута align <img src="http://www.intuit.ru/img/logo.gif" align="middle"> центрирует изображение по вертикали

Выравнивание изображения по нижнему краю <img src="http://www.intuit.ru/img/logo.gif" align="bottom"> (align="bottom") используется по умолчанию (можно сравнить с предыдущим примером).

В этом примере изображение <img src="http://www.intuit.ru/img/logo.gif" align="left"> смещено влево и начиная со следующей строчки текст как бы обтекает вставленный рисунок. При таком способе выравнивания желательно помещать изображение в начале параграфа.

<img src="http://www.intuit.ru/img/logo.gif" align="right"> Изображение прижато к правому краю рабочей области (align="right"). Текст занимает все свободное пространство слева от изображения обтекая его.

</body> </html>

Пример выполнения данного HTML-кода

Кроме того, для форматирования изображений внутри текста используются атрибуты hspace и vspace, которые определяют интервал между графическим изображением и обтекающим текстом по горизонтали и вертикали соответственно. Размер отступов задается в пикселях.

<img src="logo.gif" align="left"> В данном варианте используются установленные по умолчанию значения hspace и vspase. Изображение выравнено по левому краю при помощи align="left".

<img src="logo.gif" align="left" hspace="20" vspace="20"> В данном варианте значения hspace и vspace установлены равными 20. Обратите внимание, что эти параметры влияют не столько на отступ от текста до изображения, сколько на величину свободной зоны вокруг изображения вообще. В данном случае изображение сместилось вправо вниз.

Примечание: Для лучшего понимания работы атрибутов hspace и vspase в данном примере уменьшите размер окна Вашего браузера.

</body> </html>

Пример выполнения данного HTML-кода