Текс на картинке

[Barik]

Здравствуйте! Помогите пожалуйста в решении следующей проблемы.

Есть не большая разметка:

 <div id="gallery">
            <div class="container">
                <h2>photos</h2>
                <figure class="photo">
<a href="img/pic1.jpg"></a>
</figure>

Подскажите пожалуйста можно ли поместить текст на картинке? Я читал про элемент figure, но нашёл что только снизу можно текст оформить.

[AlexZaw]

02.07.2019 в 04:54, Barik сказал:

Подскажите пожалуйста можно ли поместить текст на картинке?

Можно, если использовать относительное и абсолютное позиционирование.

<div class="image">
  <img src="http://placekitten.com/200">
  <span>Lorem, ipsum dolor.</span>
</div>

.image{
  position: relative;
  display: inline-block;
}
img{
  vertical-align: top;
}
span{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}