Від автора: як зробити в html підпис під картинкою? Дійсно, як? З першого погляду все здається простіше нікуди, але на ділі не кожен може сам додуматися до того, як же все-таки розмістити текст рівному під картинкою, адже вона є рядковим елементом.
Самий примітивний варіант
Відразу після зображення поставте тег br і напишіть текст. Звичайно, він не буде розташовується по центру, але зате буде під картинкою, так що його вже можна назвати підписом. Варіант не підходить для тих випадків, коли фото розташовується в рядку не в самому початку, тому що в такому випадку за надрукованого тексту незрозуміло, до чого він взагалі відноситься.
Тег br ставити необов’язково, можна просто укласти підпис в тег абзацу, тоді текст сам перенесеться на наступний рядок, так як абзац – блочний елемент.
Гаразд, це був найпростіший спосіб, який не завжди підійде, тому пропоную розглянути більш правильні.
Поєднання зображення і підписи блок
Все дуже просто. Ми помістимо зображення і підпис до неї в окремий блок.
Жаба
При такому способі ви легко зможете вирівняти текст підпису рівно по центру зображення, але при цьому потрібно обмежити ширину головного контейнера, поставити її рівно такою, якою є ширина зображення:
.frog p{
text-align: center;
}
.frog{
max-width: 200px;
}
У моєму випадку це 200 пікселів.
З допомогою селектора .frog p ви можете застосувати додаткові стилі до підпису.
Використання тега figure
Таке рішення є найбільш оптимальним, так як в ньому використовуються теги html5 – figure і figcaption. Вони призначені для групування елементів разом.
По суті, нам навіть практично повністю підходить код попереднього прикладу, потрібно тільки замінити div на figure і p на figcaption:
Жаба
Все інше актуально і для цього варіанту. Зокрема, саме по собі пошук тексту в теге figcaption не вирівнює його по центру. Щоб вирівняти, потрібно зробити те ж саме, що ми робили в попередньому способі. Я змінив колір тексту, щоб підпис у цьому прикладі хоч чимось відрізнялася від того, що ми зробили в попередньому прикладі.
Як бачите, обидва способи дають однаковий результат. Ну і ще 1 варіант навздогін
У цьому прикладі не потрібно поміщати зображення і підпис у блок або фігуру, вони можуть бути просто самостійними елементами, але при цьому повинні стояти друг за іншому у розмітці.
Жаба
Тепер стильової клас я прописав не блоку, а зображенню, бо блоку немає. Вся заковика тут в стилях, ось вони:
.frog{
display: block;
}
.frog + p{
width: 200px;
text-align: center;
}
Отже, ми робимо наше зображення блоковим. В принципі, у випадку з абзацом це було робити необов’язково, але якщо б підпис ви б писали, наприклад, в теге span, то необхідність поставити блочне поведінка була б, бо інакше картинка і підпис перебували б на одному рядку.
Ну а щоб вирівняти підпис по центру картинки, ми даємо йому ширину картинки і вирівнювання тексту по центру. Зауважте, який селектор я використовував. Такі селектори називаються сусідніми. Наприклад: .frog + p – буде обраний абзац, який лежить в html-розмітки відразу за елементом з класом frog.
Результат аналогічний попереднім способів, навіть скріншот не буду показувати. Що ж, це все способи зробити в html підпис під зображенням, які я хотів вам показати. Справа то насправді дуже дріб’язкове, тому особливо над його вирішенням немає сенсу замислюватися, просто вибирайте будь-який спосіб і робіть.
