Как в данном случае вывести текст поверх изображения?

Question

Как в этом случае вывести текст по вертикальному и горизонтальному центру изображения?

<style>
 
 .darkened {
 position: relative;
 }
 
 .darkened::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: rgba(0,0,0,0.5);  
 z-index: 1;
 }
 </style>
 
 
 
 <div class="darkened" >
 <img src="https://aliadvert.ru/b/17" width="100%" height="250px" alt=""> 
</div>

Пример: на фото.

Answer 1

.container {
  position: relative;
  display: inline-block;
}
.text {
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

    <div class="container">
      <img src="https://picsum.photos/300/150.jpg" alt="">
      <span class="text">текст в центре</span>
    </div>

БЛОГ НА HUSL

Как в данном случае вывести текст поверх изображения?

Ответы (1 шт):