Атрибут align тега <img>

Описание

Атрибут align определяет выравнивание изображения относительно окружающего текста или других элементов. Устарел в HTML5 - вместо него рекомендуется использовать CSS-свойства.

Пример использования (устаревший):
<img src="photo.jpg" alt="Пример выравнивания" align="right" hspace="10" vspace="10" width="200"> <p>Текст будет обтекать изображение с левой стороны.</p>

Доступные значения:

Значение Эквивалент в CSS Описание
left float: left; Выравнивание по левому краю с обтеканием текста справа
right float: right; Выравнивание по правому краю с обтеканием текста слева
top vertical-align: top; Верхнее выравнивание относительно текста
middle vertical-align: middle; Выравнивание по середине относительно текста
bottom vertical-align: bottom; Нижнее выравнивание (по умолчанию)

Современная альтернатива на CSS:

<style> .float-right { float: right; margin: 0 0 10px 10px; } .vertical-middle { vertical-align: middle; } </style> <img src="photo.jpg" alt="Современное выравнивание" class="float-right" width="200"> <p>Текст корректно обтекает изображение.</p>

Рекомендации по замене устаревшего атрибута:

  • Используйте float для обтекания текстом
  • Применяйте vertical-align для вертикального выравнивания
  • Для сложного позиционирования используйте Flexbox или Grid
  • Добавляйте отступы через margin вместо hspace/vspace

Пример с Flexbox:

<style> .image-container { display: flex; align-items: center; /* вертикальное выравнивание */ gap: 20px; } </style> <div class="image-container"> <img src="icon.png" alt="Иконка" width="50"> <p>Текст, выровненный по центру относительно изображения</p> </div>

Ограничения и совместимость:

  • Атрибут работает в старых браузерах, но не валиден в HTML5
  • CSS-аналоги поддерживаются всеми современными браузерами
  • Float требует очистки (clearfix) для последующих элементов
  • Flexbox/Grid обеспечивают более предсказуемый результат

Примечание: Хотя атрибут align может еще работать в некоторых браузерах, его использование считается плохой практикой. Для современной вёрстки всегда выбирайте CSS-решения, которые предлагают больше контроля и гибкости.