Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
6.0+ | 1.0+ | 9.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Выровнять фотографию с подписью по центру горизонтали веб-страницы.
Иллюстрации к тексту часто выравнивают по центру веб-страницы, при этом текст располагается до и после изображения. Такое расположение элементов позволяет разбить большой текст на смысловые блоки и привлечь внимание к рисункам.
Вначале рассмотрим выравнивание изображения по центру. Для этого к селектору P следует добавить стилевое свойство text-align со значением center. При этом тег <img> должен располагаться внутри абзаца (тег <p>). Чтобы не получилось так, что все абзацы на странице начали выравниваться по центру, введем свой класс fig, и все действия будем производить с ним. В примере 1 показано, как это сделать.
Пример 1. Использование text-align
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Выравнивание фотографии по центру</title> <style> .fig { text-align: center; /* Выравнивание по центру */ } </style> </head> <body> <p>Текст до изображения</p> <p class="fig"><img src="images/photo1.jpg" width="320" height="181" alt="Фотография"></p> <p>Текст после изображения</p> </body> </html>
Результат данного примера продемонстрирован на рис. 1.
Рис. 1. Изображение, выровненное по центру веб-страницы
Также к фотографии можно добавить подрисуночную подпись. Текст должен располагаться сразу же после изображения и аналогично ему выравниваться по центру. Здесь всё просто, опять воспользуемся нашим классом, но уже применим его к тегу <figure>. Чтобы текст подписи отличался по своему виду от обычных абзацев, сделаем его курсивным и выделим другим цветом (пример 2).
Пример 2. Подрисуночная подпись
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Фотография с подписью</title> <style> .fig { display: block; /* Блочный элемент (для старых браузеров) */ text-align: center; /* Выравнивание по центру */ font-style: italic; /* Курсивное начертание */ margin-top: 0; /* Отступ сверху */ margin-bottom: 5px; /* Отступ снизу */ color: #666; /* Цвет подрисуночной подписи */ } </style> <!--[if lt IE 9]> <script> document.createElement('figure'); document.createElement('figcaption'); </script> <![endif]--> </head> <body> <figure class="fig"> <img src="images/photo2.jpg" width="320" height="179" alt="Барельеф"> <figcaption> Пещерный человек добывает огонь. Но что это за лунная поверхность на заднем плане? Нет, не так все просто. </figcaption> </figure> </body> </html>
Результат данного примера показан на рис. 2.
Рис. 2. Подпись под рисунком
Для блока с фотографией используется тег <figure>, а для подписи к нему тег <figcaption>. Старые версии IE не понимают эти теги, поэтому специально для них добавляется небольшой скрипт.
Сайт