Как выровнять фотографию по центру веб-страницы?

🕛 19.01.2009, 19:16

Иллюстрации к тексту часто выравнивают по центру веб-страницы, при этом текст располагается до и после изображения. Такое расположение элементов позволяет разбить большой текст на смысловые блоки и привлечь внимание к рисункам.

Вначале рассмотрим выравнивание изображения по центру. Для этого к селектору P следует применить стилевой атрибут text-align со значением center. При этом тег <IMG> должен располагаться внутри абзаца (тег <P>). Чтобы не получилось так, что все абзацы на странице начали выравниваться по центру, введем свой класс figure, и все действия будем производить с ним. В примере 1 показано, как это сделать.

Пример 1. Использование text-align

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Выравнивание фотографии по центру</title> <style type="text/css"> P.figure { text-align: center; /* Выравнивание по центру */ } </style> </head> <body> <p>Текст до изображения</p> <p class="figure"><img src="images/photo1.jpg" width="320" height="181" alt="Фотография"></p> <p>Текст после изображения</p> </body>
</html>Результат данного примера продемонстрирован на рис. 1.

Рис. 1. Изображение, выровненное по центру веб-страницы

Также к фотографии можно добавить подрисуночную подпись. Текст должен располагаться сразу же после изображения и аналогично ему выравниваться по центру. Здесь все просто, опять воспользуемся нашим классом, но уже применим его к абзацу, идущему после абзаца с тегом <IMG>. Чтобы текст подписи отличался по своему виду от обычных абзацев, сделаем его курсивным и выделим другим цветом (пример 2).

Пример 2. Подрисуночная подпись

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Фотография с подписью</title> <style type="text/css"> P.figure { text-align: center; /* Выравнивание по центру */ font-style: italic; /* Курсивное начертание */ margin-top: 0; /* Отступ сверху */ margin-bottom: 5px; /* Отступ снизу */ color: #666; /* Цвет подрисуночной подписи */ } </style> </head> <body> <p class="figure"><img src="images/photo2.jpg" width="320" height="179" alt="Барельеф"></p> <p class="figure"> Пещерный человек добывает огонь. Но что это за лунная поверхность на заднем плане? Нет, не так все просто. </p> </body>
</html>

В любом абзаце по умолчанию установлены отступы сверху и снизу, за счет них расстояние между фотографией и текстом под ней может оказаться значительным. С этой целью в данном примере применяются стилевые атрибуты margin-top и margin-bottom. Впрочем, в подобных случаях всегда можно воспользоваться универсальным атрибутом margin.