Выравнивание изображений
Для изображений можно указывать их положение относительно текста или других изображений на веб-странице. Способ выравнивания изображений задается параметром align тега <IMG>. В табл. 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. Обтекание текста вокруг рисунка
<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. Выравнивание изображения по левому краю
| Статья опубликована: 06.09.2005 | Последнее обновление: 16.04.2008 |
Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.
- Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
- Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
- Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
- Потренироваться в написании комментариев вы можете в песочнице.
Комментарии к статье
К.Лирик
26.10.2006
Влад Мержевич
26.10.2006
htmlbook.ru/content/?id=95
kost-bebix
16.04.2007
Влад Мержевич
17.04.2007
Houp
12.05.2007
Влад Мержевич
14.05.2007
ХЗ КТО
31.08.2007
Влад Мержевич
03.09.2007
I'm
09.09.2007
Starik_ya
22.09.2007
там таблицы нужны или как ?
Жорик
11.10.2007
Влад Мержевич
15.10.2007
Текст на изображении ставится:
1. в графическом редакторе сразу на рисунке;
2. рисунок устанавливается фоном, текст пишется как обычно;
3. с помощью позиционирования слой с текстом накладывается на слой с изображением.
Mr. Z
16.03.2008
LitR
25.03.2008
Иван
09.05.2008
<code>
Не понимаю, почему в этом коде под изображением есть зеленая полоса
<head>
<style>
*
{
padding:0;
margin:0;
}
</style>
</head>
<body>
<table style="margin:0 auto;" >
<tr>
<td style="background:green;" >
<img width="972" height="240" src="images/logo_head.jpg" align="bottom" >
</td>
</tr>
</table>
</body>
</code>,
а под этим нету
<head>
<style>
*
{
padding:0;
margin:0;
}
</style>
</head>
<body>
<table style="margin:0 auto;" >
<tr>
<td style="background:green;" >
<img width="972" height="240" src="images/logo_head.jpg" align="top" >
</td>
</tr>
</table>
</body>.
Хотя все, что я изменил это параметр aling. Нету никакого некста по которому выравниваться изображению и подпрыгивать на эту зеленую полоску. Объясните ,пожалуйста.
Иван
09.05.2008
zlol
21.07.2008