Внимание! На этой странице вы найдете материал урока из архивного курса по HTML. Курс был написан в 2015, обновлен в 2024 году и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по HTML и на странице первого урока.
- Сразу после первой картинки добавьте еще одну и выровняйте по правому краю окна
Выравнивание изображения (атрибут align)
- Атрибут
alignпозволяет выравнивать изображение относительно текста или других изображений. - Атрибут
alignпринимает пять значений.
Примеры выравнивания изображения
- Выравнивание по левому краю окна
- Выравнивание по правому краю
Примечание (10.2024)
- Атрибут
alignустарел и может быть заменен свойствами CSS. - Рекомендуется использовать свойства CSS для более современных и гибких решений.
Переход к следующему уроку
- После изучения выравнивания изображения рекомендуется перейти к следующему уроку.
- В следующем уроке будут рассмотрены ширина, высота и рамка изображений.
В предыдущем уроке познакомились с тегом <img> и научились добавлять изображения в HTML-документ. В этом уроке будем ровнять его относительно текста.
Выравнивание изображения (атрибут align)
Если вы хотите сделать обтекание текстом изображение или указать положение относительно других изображений, то поможет атрибут align. Атрибут align принимает пять значений.
Значение атрибута align |
Действие |
|---|---|
bottom |
Выравнивание нижней границы изображения по окружающему тексту. |
left |
Выравнивает изображение по левому краю окна. |
middle |
Выравнивание середины изображения по базовой линии текущей строки. |
right |
Выравнивает изображение по правому краю окна. |
top |
Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. |
Далее пример выравнивания изображения по левому краю окна:
<!DOCTYPE html>
<html>
<head>
<title>codebra</title>
</head>
<body>
<img width = "100px" src = "/img/site/logo.png" align = "left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras neque ipsum, convallis a nulla non, interdum rutrum ipsum. Maecenas scelerisque magna sit amet quam pulvinar, faucibus dignissim dui semper. Maecenas scelerisque magna sit amet quam pulvinar, faucibus dignissim dui semper. Maecenas scelerisque magna sit amet quam pulvinar, faucibus dignissim dui semper. Maecenas scelerisque magna sit amet quam pulvinar, faucibus dignissim dui semper. Nullam efficitur massa nec metus tempor lobortis. Nulla at orci hendrerit, pulvinar odio eget, eleifend ligula. Nam ultricies felis convallis tortor pellentesque tristique. Vivamus volutpat dapibus maximus.
</body>
</html>
И пример выравнивания по правому краю:
<!DOCTYPE html>
<html>
<head>
<title>codebra</title>
</head>
<body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras neque ipsum, convallis a nulla non, interdum rutrum ipsum. Maecenas scelerisque magna sit amet quam pulvinar, faucibus dignissim dui semper. Maecenas scelerisque magna sit amet quam pulvinar, faucibus dignissim dui semper. Maecenas scelerisque magna sit amet quam pulvinar, faucibus dignissim dui semper. Maecenas scelerisque magna sit amet quam pulvinar, faucibus dignissim dui semper. Nullam efficitur massa nec metus tempor lobortis. Nulla at orci hendrerit, pulvinar odio eget, eleifend ligula.
<img width = "100px" src = "/img/site/logo.png" align = "right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras neque ipsum, convallis a nulla non, interdum rutrum ipsum. Maecenas scelerisque magna sit amet quam pulvinar, faucibus dignissim dui semper. Maecenas scelerisque magna sit amet quam pulvinar, faucibus dignissim dui semper. Maecenas scelerisque magna sit amet quam pulvinar, faucibus dignissim dui semper. Maecenas scelerisque magna sit amet quam pulvinar, faucibus dignissim dui semper. Nullam efficitur massa nec metus tempor lobortis. Nulla at orci hendrerit, pulvinar odio eget, eleifend ligula.
</body>
</html>
Кстати, в примерах вы могли заметить атрибут width. С ним будем разбираться в следующем уроке.
Атрибут align давно устарел и его легко можно заменить свойствами CSS, о которых мы будем говорить позднее.
Обязательно запустите эти примеры и посмотрите на результат. Попробуйте применить другие значения атрибута align и только затем переходите к следующему уроку, в котором будем говорить о ширине, высоте и рамке изображений.
Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу HTML.
