| 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
HTML5CSS 2.1IECrOpSaFx
<!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" alt="Фотографія"></p>
<p>Текст після зображення</p>
</body>
</html>
Результат цього прикладу продемонстровано на рис. 1.
Рис. 1. Зображення, вирівняна по центру веб-сторінки
Також до фотографії можна додати рисунком підпис. Текст повинен розташовуватися відразу ж після зображення і аналогічно йому вирівнюватися по центру. Тут все просто, знову скористаємося нашим класом, але вже застосуємо його до тегу <figure>. Щоб текст відрізнявся за своїм виглядом від звичайних абзаців, зробимо його курсивним і виділимо іншим кольором (приклад 2).
Приклад 2. Підпис під зображенням
HTML5CSS 2.1IECrOpSaFx
<!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" alt="Барельєф">
<figcaption>
Печерна людина добуває вогонь. Але що це за місячна поверхня на задньому плані? Ні, не так все просто.
</figcaption>
</figure>
</body>
</html>
Результат цього прикладу показано на рис. 2.
Рис. 2. Підпис під малюнком
Для блоку з фотографією використовується тег <figure>, а для підпису до нього тег <figcaption>. Старі версії IE не розуміють ці теги, тому спеціально для них додається невеликий скрипт.