Как разместить текст на изображении с помощью тега href

Question

В bootstrap 4 мы можем добавить классы для размещения текста поверх изображения следующим образом:

  <div class="container">
   <div class="row">
     <div class="col-lg-3 text-center d-flex align-items-center">
        <img class="img-fluid position-relative mx-auto" src="//placehold.it/360x360" alt="">
        <h3 class="w-100 position-absolute text-danger my-auto">Title</h3>
     </div>
   </div>
 </div>

Но когда я добавляю тег, он больше не работает:

  <div class="container">
   <div class="row">
     <div class="col-lg-3 text-center d-flex align-items-center">
      <a href="#0">
        <img class="img-fluid position-relative mx-auto" src="//placehold.it/360x360" alt="">
        <h3 class="w-100 position-absolute text-danger my-auto">Title</h3>
      </a>
     </div>
   </div>
 </div>

Вот код для отображения проблемы: https://www.codeply.com/p/ADqP51VnTE

Answer 1

Попробуйте это ... используйте класс d-flex align-items-center в теге.

  <div class="container">
   <div class="row">
     <div class="col-lg-3 text-center d-flex align-items-center">
        <img class="img-fluid position-relative mx-auto" src="//placehold.it/360x360" alt="">
        <h3 class="w-100 position-absolute text-danger my-auto">Title</h3>
     </div>
    <div class="col-lg-3">
      <a href="#0" class="text-center d-flex align-items-center">
        <img class="img-fluid position-relative mx-auto" src="//placehold.it/360x360" alt="">
        <h3 class="w-100 position-absolute text-danger my-auto">Title</h3>
      </a>
    </div>
   </div>
 </div>