Разделы

Выравнивание изображения по центру

Метки:

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

Вначале рассмотрим выравнивание изображения по центру. Для этого к селектору 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="dino.gif" width="450" height="103" alt="Динозаврики"></p>
  <p>Текст после изображения</p>
 </body>
</html>

Результат данного примера продемонстрирован на рис. 1.

Рис. 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: #008000; /* Цвет подрисуночной подписи */
   }
  </style>
 </head>
 <body>
  <p class="figure"><img src="dino.gif" width="445" height="103" alt="Динозаврики"></p>
  <p class="figure">Розовый и зеленый динозаврики</p>
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Пример подрисуночной подписи

Рис. 2. Подпись под рисунком

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

Антон, 02.05.2009

Проще для картинки применить margin-left и margin-right значение auto,

Разделы

Термины

Выравнивание изображения по центру

Отправить комментарий