Как сделать чтобы картинка была посередине

HTML изображение

HTML изображение и текст

Особенности взаимодействия HTML изображения и текста

Посмотрим, как разместить текст слева или справа изображения.

В предыдущем уроке мы рассмотрели метод вывода HTML изображения с расширением.jpg на web-страницу и то, как установить дополнительное расстояние между ним, и текстом. Продолжим наше знакомство с тегом <img /> и особенностями его взаимодействия с элементами текста.


Навигация по странице

  1. Текст вверху, внизу, по центру изображения
  2. HTML изображение слева – текст справа
  3. HTML изображение справа – текст слева

Текст вверху, внизу, по центру изображения

Пример:

<html>
<head>
<title>HTML текст вверху, внизу, по центру изображения</title>
</head>
<body>
<p><img src="../images/2121.png" width="128" height="128" align="top" />Текст вверху изображения</p>
<p><img src="../images/2121.png" width="128" height="128" align="middle" /> Текст по центру изображения</p>
<p><img src="../images/2121.png" width="128" height="128" align="bottom" /> Текст внизу изображения</p>
</body>
</html>

Результат:

HTML текст. Текст вверху, внизу, по центру изображения

Посмотреть в новом окне: HTML текст вверху, внизу, по центру изображения

Атрибуты и значения

  • align="top" – выравнивает изображение и текст по верху.
  • align="middle" – выравнивает изображение и текст по центру, по вертикали.
  • align="bottom" – выравнивает изображение и текст по низу.

Напомню, что для web применимы изображения трех форматов: PNG (.png), JPEG (.jpg) и GIF (.gif).

Обратите внимание на способ подгрузки изображения:../images/2121.png. Во-первых, использован формат PNG (.png). Во-вторых, изображение находится в отдельной папке, то есть документ у меня в одной папке, а изображение в другой. В таких ситуациях очень важно правильно указать путь от документа к подгружаемой картинке, что и было сделано: первые две точки.. определяют выход из папки где находится документ (все уроки, они же страницы, они же документы курса по HTML у меня находятся в одной папке, CSS – в другой, изображения – в третьей и так далее); /images/ – не что иное, как название папки с изображениями, а 2121.png – полное имя файла самого изображения.

HTML изображение слева – текст справа

Пример:

<html>
<head>
<title>HTML изображение слева – текст справа</title>
</head>
<body>
<img src="../images/2121.png" align="left" width="128" height="128" />
<p>Изображение обтекает текст слева</p>
<p>Изображение обтекает текст слева</p>
<p>Изображение обтекает текст слева</p>
<p>Изображение обтекает текст слева</p>
</body>
</html>

Результат:

HTML текст. Изображение слева - текст справа

Посмотреть в новом окне: HTML изображение обтекает текст слева

HTML изображение справа – текст слева

Пример:

<html>
<head>
<title>HTML изображение справа – текст слева</title>
</head>
<body>
<img src="../images/2121.png" align="right" width="128" height="128" />
<p>Изображение обтекает текст справа</p>
<p>Изображение обтекает текст справа Изображение обтекает текст справа. Изображение обтекает текст справа. Изображение обтекает текст справа. Изображение обтекает текст справа. Изображение обтекает текст справа</p>
</body>
</html>

Результат:

HTML текст. Изображение справа - текст слева

Посмотреть в новом окне: HTML изображение обтекает текст справа

Дата публикации: Октябрь 2009 | Обновление: Август 2014

Урок 10. HTML изображение   HTML изображение, текст   как сделать чтобы картинка была посередине alt="">Урок 12. Верстка




Рекомендуем посмотреть ещё:


Закрыть ... [X]


Как сделать так, чтобы эта картинка (html) стояла по середине сайта? Вывести из запоя в домашних условиях лекарства

Как сделать чтобы картинка была посередине Как сделать чтобы картинка была посередине Как сделать чтобы картинка была посередине Как сделать чтобы картинка была посередине Как сделать чтобы картинка была посередине Как сделать чтобы картинка была посередине Как сделать чтобы картинка была посередине Как сделать чтобы картинка была посередине Как сделать чтобы картинка была посередине