Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

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

Alex | 16.03.2014 | нет комментариев

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

Табл. 1. Способы выравнивания изображения
Значение align Описание Пример
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…
top Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. Lorem ipsum dolor sit amet,  consectetuer adipiscing elit…

Наиболее популярны параметры left и right, поскольку они не только выравнивают изображение по краю окна браузера, но и задают обтекание текста вокруг изображения. Чтобы текст не прилегал плотно к рисунку, рекомендуется в теге <IMG> добавить параметрhspace и vspace, задающих расстояние до текста в пикселах (пример 1).

Пример 1. Обтекание текста вокруг рисунка

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1251″>
<title>Выравнивание рисунка по левому краю</title>
</head>
<body><p><img src=”sample.gif” width=”50″ height=”50″ hspace=”10″ vspace=”10″align=”left” alt=”Пример”>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.</p></body>
</html>

Результат действия данного примера показан ниже.

Рис. 1

Рис. 1. Выравнивание изображения по левому краю

АВТОРСКИЕ ПРАВА
Источник: alldes.net
При перепечатке ссылка на источник обязательна
Оставить комментарий

Ваш email не будет опубликован. Обязательные поля помечены (обязательно)

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2014 © BB3x.ru - русская поддержка форума phpBB