Атрибут align

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
1.0+1.0+1.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

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

Синтаксис

<img align="bottom | left | middle | right |  top">

Значения

В табл. 1 перечислены возможные значение атрибута align и результат его использования.

Табл. 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, создающие обтекание текста вокруг изображения.

Значение по умолчанию

bottom

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!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=utf-8">
  <title>Тег IMG, атрибут align</title>
 </head>
 <body>

  <p><img src="images/square.gif" alt="Квадрат" width="20" height="20" 
  align="right"> Этот текст обтекает рисунок по его левому краю.</p>
 
</body>
</html>

Примечание

Дополнительные значения absbottom, absmiddle, baseline и texttop понимаются браузерами, но не поддерживаются спецификацией HTML 4.x/XHTML 1.0.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.