Как наложить картинку и текст друг на друга?

Question

[alex zolotarev]

Должно быть вот так:
Пытался картинки сделать фоном текста, но сам текст не хотел центрироваться в блоке. Задаю position: absolute; улетает все к чертям.
Засунул две картинки и текст в див:

<div class="one_row">
                        <img class="back_photos" src="./main_page/ph1.jpg" alt="1">
                        <span class="text1_inside_third">Кінознімальні <br> студії</span>
                        <img class="little_yellow" src="./main_page/yellow rectangle 2.png" alt="yellow">
</div>

Comments

[Ankhena]

но сам текст не хотел центрироваться в блоке

Удобно это делать флексами.
Желательно при этом не забыть паддинги, чтобы точно ничего не прилипло к краям.

"yellow" это что? Кнопка?
Почему это img?

Answer 1

[Сергей Ермилов]

Есть все в документации. Важно понимать про позиционирование и работу relative и absolute. Пример расположения текста по четырем углам и по центру.

Стили:

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

.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

HTML:

<div class="container">
  <img src="imgage.jpg" style="width:100%;">
  <div class="bottom-left">Низ, слева</div>
  <div class="top-left">Верх, слева</div>
  <div class="top-right">Верх, справа</div>
  <div class="bottom-right">Низ, справа</div>
  <div class="centered">По центру</div>
</div>