Блог

Пытаюсь заставить элемент span отображаться в центре моего изображения, чтобы создать интерактивную кнопку. Класс Span — это элемент «plus_own», отображаемый в левом углу изображения.

 .plus_own {
   font-size: 70px;
   color: white;
   font-family: unc;
   position: relative;
   font-weight: bold;
   top: -30px;
   transition: all 0.4s ease;
}
  

Элемент класса Centered span пытается создать интерактивную кнопку.

Я бы рекомендовал взглянуть на это, чтобы лучше понять, как это работает.

Я бы порекомендовал сделать это примерно так:

 .container {
  position: relative;
  text-align: center;
  color: white;
}

.plus_own {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: red;
  font-weight: bold;
}  

 <div class="container">
    <img src="https://cdn.shopify.com/s/files/1/1330/4567/files/DSC_0838_1024x1024.jpg?v=1522089465" style="width:100%;">
    <span class="plus_own">Some Text</span>
</div>