Теория урока

40. Выравнивание изображений при помощи HTML

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ

Кратко

Выравнивание изображения (атрибут align)

- Атрибут align позволяет выравнивать изображение относительно текста или других изображений.

- Атрибут align принимает пять значений.

Примеры выравнивания изображения

- Выравнивание по левому краю окна

- Выравнивание по правому краю

Примечание (10.2024)

- Атрибут align устарел и может быть заменен свойствами CSS.

- Рекомендуется использовать свойства CSS для более современных и гибких решений.

Переход к следующему уроку

- После изучения выравнивания изображения рекомендуется перейти к следующему уроку.

- В следующем уроке будут рассмотрены ширина, высота и рамка изображений.

В предыдущем уроке познакомились с тегом <img> и научились добавлять изображения в HTML-документ. В этом уроке будем ровнять его относительно текста.

Выравнивание изображения (атрибут `align`)

Если вы хотите сделать обтекание текстом изображение или указать положение относительно других изображений, то поможет атрибут align. Атрибут align принимает пять значений.

Значение атрибута `align`	Действие
`bottom`	Выравнивание нижней границы изображения по окружающему тексту.
`left`	Выравнивает изображение по левому краю окна.
`middle`	Выравнивание середины изображения по базовой линии текущей строки.
`right`	Выравнивает изображение по правому краю окна.
`top`	Верхняя граница изображения выравнивается по самому высокому элементу текущей строки.

Далее пример выравнивания изображения по левому краю окна:

Пример (html)

<!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>

Здесь изображение или скриншот.
Для доступа необходимо авторизоваться на сайте Codebra.

И пример выравнивания по правому краю:

Пример (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>

Здесь изображение или скриншот.
Для доступа необходимо авторизоваться на сайте Codebra.

Кстати, в примерах вы могли заметить атрибут width. С ним будем разбираться в следующем уроке.

Примечание (10.2024)

Атрибут align давно устарел и его легко можно заменить свойствами CSS, о которых мы будем говорить позднее.

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

40. Выравнивание изображений при помощи HTML

Выравнивание изображения (атрибут align)

Похожие уроки Codebra

Выравнивание изображения (атрибут `align`)