Як зробити в HTML підпис під картинкою?

22

Від автора: як зробити в html підпис під картинкою? Дійсно, як? З першого погляду все здається простіше нікуди, але на ділі не кожен може сам додуматися до того, як же все-таки розмістити текст рівному під картинкою, адже вона є рядковим елементом.

Самий примітивний варіант

Відразу після зображення поставте тег br і напишіть текст. Звичайно, він не буде розташовується по центру, але зате буде під картинкою, так що його вже можна назвати підписом. Варіант не підходить для тих випадків, коли фото розташовується в рядку не в самому початку, тому що в такому випадку за надрукованого тексту незрозуміло, до чого він взагалі відноситься.

Тег br ставити необов’язково, можна просто укласти підпис в тег абзацу, тоді текст сам перенесеться на наступний рядок, так як абзац – блочний елемент.

Гаразд, це був найпростіший спосіб, який не завжди підійде, тому пропоную розглянути більш правильні.

Поєднання зображення і підписи блок

Все дуже просто. Ми помістимо зображення і підпис до неї в окремий блок.

Як зробити в HTML підпис під картинкою?

Жаба

При такому способі ви легко зможете вирівняти текст підпису рівно по центру зображення, але при цьому потрібно обмежити ширину головного контейнера, поставити її рівно такою, якою є ширина зображення:

.frog p{
text-align: center;
}
.frog{
max-width: 200px;
}

У моєму випадку це 200 пікселів.

Як зробити в HTML підпис під картинкою?

З допомогою селектора .frog p ви можете застосувати додаткові стилі до підпису.

Використання тега figure

Таке рішення є найбільш оптимальним, так як в ньому використовуються теги html5 – figure і figcaption. Вони призначені для групування елементів разом.

По суті, нам навіть практично повністю підходить код попереднього прикладу, потрібно тільки замінити div на figure і p на figcaption:

Як зробити в HTML підпис під картинкою?
Жаба

Все інше актуально і для цього варіанту. Зокрема, саме по собі пошук тексту в теге figcaption не вирівнює його по центру. Щоб вирівняти, потрібно зробити те ж саме, що ми робили в попередньому способі. Я змінив колір тексту, щоб підпис у цьому прикладі хоч чимось відрізнялася від того, що ми зробили в попередньому прикладі.

Як зробити в HTML підпис під картинкою?

Як бачите, обидва способи дають однаковий результат. Ну і ще 1 варіант навздогін

У цьому прикладі не потрібно поміщати зображення і підпис у блок або фігуру, вони можуть бути просто самостійними елементами, але при цьому повинні стояти друг за іншому у розмітці.

Як зробити в HTML підпис під картинкою?

Жаба

Тепер стильової клас я прописав не блоку, а зображенню, бо блоку немає. Вся заковика тут в стилях, ось вони:

.frog{
display: block;
}
.frog + p{
width: 200px;
text-align: center;
}

Отже, ми робимо наше зображення блоковим. В принципі, у випадку з абзацом це було робити необов’язково, але якщо б підпис ви б писали, наприклад, в теге span, то необхідність поставити блочне поведінка була б, бо інакше картинка і підпис перебували б на одному рядку.

Ну а щоб вирівняти підпис по центру картинки, ми даємо йому ширину картинки і вирівнювання тексту по центру. Зауважте, який селектор я використовував. Такі селектори називаються сусідніми. Наприклад: .frog + p – буде обраний абзац, який лежить в html-розмітки відразу за елементом з класом frog.

Результат аналогічний попереднім способів, навіть скріншот не буду показувати. Що ж, це все способи зробити в html підпис під зображенням, які я хотів вам показати. Справа то насправді дуже дріб’язкове, тому особливо над його вирішенням немає сенсу замислюватися, просто вибирайте будь-який спосіб і робіть.