2.6.4.1. Выравнивание изображений (атрибут align).

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

Значение параметра align	Действие параметра
top	Верхняя граница изображения выравнивается по самому высокому элементу текущей строки
texttop	Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки
middle	Выравнивание середины изображение по базовой линии текущей строки
absmiddle	Выравнивание середины изображение посередине текущей строки
baseline или bottom	Выравнивание нижней границы изображение по базовой линии текущей строки
absbottom	Выравнивание нижней границы изображение по нижней границе текущей строки
left	Изображение прижимается к левому полю окна. Текст обтекает изображение с правой стороны
right	Изображение прижимается к правому полю окна. Текст обтекает изображение с левой стороны

Сразу же оговоримся, что все значения параметров выравнивания изображений можно условно разделить на две группы по их принципу действия. К одной группе относятся два значения параметра - left и right . При использовании любого из этих параметров мы получаем так называемое "плавающие" изображение. В этом случае изображение прижимается к соответствующему краю окна просмотра браузера, а последующий текст (или другие элементы) "обтекают" изображение с противоположной стороны. Здесь текст, размещаемый рядом с изображением может занимать несколько строк.

К другой группе значений параметров относятся все остальные. При их использовании изображение как бы встраивается в строчку текста, а параметры выравнивания задают расположение изображение относительно строки текста. Таким образом, в отличии от плавающих изображений, здесь изображения являются обычным элементом строки. Это легко понять, если представить, что изображение является просто одной буквой текста, правда, достаточно большой (типа буквицы).

Приведём пример кода, в котором используются изображения:

<html> <head> <title>Выравнивание изображений</title> </head> <body> Выравнивание<IMG src="../images/cat.jpg" align="top">по верхнему краю <p> Выравнивание<IMG src="../images/cat.jpg" align="baseline">по базовой линии </body> </html>

Возникает вопрос, в чем разница между базовой линией и нижней границей строки? Или различие между самым высоким элементом строки и самым высоким текстовым элементом строки? Результат действия этих параметров может отличаться в зависимости от содержимого рассматриваемой строки.

Базовая линия - это нижняя часть линии текста, которая проводиться без учета нижней части некоторых символов, например, букв типа j, q, y. В отличии от выравнивания по базовой линии, при задании значения absbottom выравнивание выполняется по нижней части самого низкого элемента в строке, т.е. по одному из символов строки, имеющему элементы, лежащие ниже базовой линии. Аналогично обстоит дело с различием между параметрами top и texttop .