Bootstrap 4. Как расположить текст посередине масштабируемого изображения?

Question

[Sprite1985]

Добрый день!
Есть изображение (фон), масштабируемое с сохранением пропорций при изменении размера окна браузера.
Не могу вставить текст по центру(
Пишу на Bootstrap 4, наверняка там уже есть этот функционал.
Делаю так:

<div class="container-fluid">
  <img src="img/image.jpg" class="w-100" alt="">
    <div class="row">
      <h1 class>Текст</h1>
    </div>
  </div>  	  		
</div>

При этом надпись располагается под изображением. Как расположить надпись посередине?

Answer 1

[Антон]

Bootstrap тут не при чём. Вам нужно использовать position: absolute для того, чтобы накладывать текст на изображение в Вашем примере. Ещё можно сделать div с background указанного изображения, задать статическую (или минимальную) высоту этому div'у, а внутри расположить текст. А самому div'у прописать:

display: inline-flex;
display: -moz-inline-box;
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
align-items: center;
-ms-flex-align: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;