Выравнивание
Если слова, эти дисциплинированные бойцы за ясность мысли, краткость изложения, всегда расставляются в ряды и выстраиваются по смысловому ранжиру, то изображения имеют намного большую свободу в пространстве документа. Логично предположить, что для определения их положения на странице существует больше возможностей выравнивания, чем для текста. Подобно тексту, рисунки могут быть выровнены по горизонтали. Этот способ координирования имеет смысл почти для всех объектов гипертекстового документа, в том числе и для встроенной графики. Все обычные виды текстового выравнивания, за исключением выключки по ширине, могут быть применены для графических объектов, интегрированных в текстовый массив. Кроме того, рисунки допускают и несколько типов выравнивания по вертикали. Для плавающих изображений можно регулировать способ обтекания текстом и привязку к элементам дизайна страницы, что также можно рассматривать как выравнивание.
Выравнивание по горизонтали
Встроенное в текст изображение в определенной степени является его частью. Это утверждение полностью сохраняет свою справедливость в отношении выравнивания. Команды выключки действуют на все содержимое абзацев или структурных блоков, включая и внедренные рисунки. Чтобы добиться их сдвига по горизонтали, достаточно поместить текстовый курсор в любое место структурного блока и применить одну из команд меню Text > Align (Текст > Выравнивание). В плане кодирования здесь также нет никаких отличий от выравнивания текстовых фрагментов. Выбранный тип выключки присваивается атрибуту align, который может быть частью дескриптора абзаца <р> или входить в дескриптор раздела <div>.
Выравнивание по вертикали
Размеры литер и встроенной графики могут значительно отличаться, поэтому требуются средства, влияющие на вертикальное положение изображений и позволяющие добиться более гармоничного расположения иллюстраций и связанного с ними текста. В языке HTML эти задачи решают команды выравнивания по вертикали.
Носителем информации о выбранном способе выравнивания является атрибут align дескриптора <img>. Так, следующий кодовый фрагмент задает для изображения, записанного в файле anim.gif, вертикальное выравнивание по нижнему краю рисунка:
<img src="anim.gif" width="50" height="60" align="bottom">
Выравнивание изображения по вертикали настраивается следующим образом.
Все разделы этого списка приведены в следующей таблице 7.1.
Таблица 7.1. Тип выравнивания рисунка по вертикали
|
Вид выравнивания по вертикали |
Результат |
|
Browser Default (По умолчанию для броузера) |
Если выбрать этот пункт, то в дескриптор <img> не включаются атрибуты выравнивания. Вопрос о выравнивании по вертикали оставляется на усмотрение программы просмотра. Большая часть броузеров принимает по умолчанию вариант Baseline (По базовой линии) |
|
Baseline (По базовой линии) |
Нижний край рисунка выравнивается по базовой линии текста |
|
Тор (По верхнему краю) |
Верхняя граница изображения выравнивается по верхней части самого высокого объекта, расположенного в данной строке |
|
Middle (По середине) |
Середина графического объекта выравнивается по базовой линии текста |
|
Bottom (По нижнему краю) |
Нижний край рисунка выравнивается по базовой линии текста |
|
Text Top (По верхнему краю символов) |
Верхняя граница изображения выравнивается по верхней части самого высокой литеры, расположенной в данной строке |
|
Absolute Middle (По середине строки) |
Середина изображения выравнивается по середине текста или других объектов данной строки |
|
Absolute Bottom (По нижнему краю строки) |
Нижняя граница изображения выравнивается по нижним выносным элементам букв данной строки. Пусть текстовая строка состоит из одной литеры р. При выравнивании по нижнему краю (Bottom) базой служит основное очко литеры. Для данного способа в качестве базы выбирается самая нижняя точка буквы |
|
Left (По левому краю) |
Изображение выравнивается по левой части окна броузера или ячейки таблицы, в результате текст текущего абзаца обтекает картинку справа |
|
Right (По правому краю) |
Изображение выравнивается по правой части окна или ячейки таблицы. Массив текста обтекает рисунок слева |
