По просьбе подписчицы сегодня расскажу как правильно подписать картинку. Тема актуальна практически для любого сайта. Итак, поехали!
Для начала нужно знать, что писать, если картинка до сих пор прогружается. С каждым было, признайтесь! Заходите вы на сайт, а там вместо картинки краш какой-то. Серая субстанция. Чтобы вместо этой серой субстанции что-то было, используйте атрибут alt тэга img. Выглядит так:
<img src="Картинка.png" alt="Картинка еще не прогрузилась, но она все равно прогрузится! Верьте в это!">
А теперь как правильно подписать картинку. Подписать ее можно сверху или снизу. Изредка даже сбоку, но так лучше не делать, потому что неизвестно что получите. Сверху и снизу - наилучший вариант. Допустим, на вашем сайте есть статья про колобка. Вам нужно поместить картинку с колобком и подписать ее. Наилучший вариант - использование тэга <figure>. В примере я размещу подпись снизу картинки.
Выглядеть код будет примерно так:
Что мы тут сделали? Мы добавили в контейнер <figure> картинку, а внизу с помощью <figcaption> подписали ее, а в таблицах стилей мы еще и отцентрировали эту подпись под картинкой. Если у вас картинка сбоку - не беда. Можете написать отступ подписи от левого или правого края. Кстати, отцентрировать контент можно также с помощью стилевых средств align-items и justify-content. У этих средств имеется параметр "center". Эти ребята отвечают за горизонтальное и вертикальное выравнивание контента. Но об этом чуть позже, когда будем беседовать с вами про CSS. Беседа будет долгая :D
Если остались вопросы - комментарии для вас!