Question

在引导程序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>

如何在带有href标签的图像中放置文本

1 个答案: