Лекция: Выравнивание изображений (атрибут 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 .