Учебник по HTML и CSS

HTML

CSS

Статьи

Полезное


Статьи

Основы HTML
Текст
Изображения
Ссылки
Списки
Таблицы
Формы
Фреймы
Основы CSS
Рецепты CSS
Оформление таблиц
Основы верстки
Табличная верстка
Верстка с помощью слоев
Использование слоев
Примеры верстки слоями

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

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

Табл. 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. Обтекание текста вокруг рисунка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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.




На главную









  • При использовании материалов сайта ссылка на comnew.ru обязательна!