文本不想在图像下方。使用 bootstrap

Question

大家好，你们知道如何在图片下方制作这段文字吗？我试过在文本上使用 absolute 并且它有效但是当我测试响应文本时，响应文本将成为内容的底部而不是图片下方。 #sorryforbadenglish

.fitur {
  padding: 15px 0;
  text-align: center;
}

.fitur .btn-get-started {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 28px;
  border-radius: 4px;
  transition: 0.5s;
  color: #fff;
  background-image: url("../img/gplay.png");
  background-size: cover;
  width: 210px;
  height: 61px;
}

.fitur .col-half-offset {
  margin-left: 4.166666667%
}

.fitur p.sub {
  font-size: 16px;
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
}

.fitur img {
  max-width: 200%;
  transition: all 0.4s ease-in-out;
  display: inline-block;
  padding: 15px 0;
}

.fitur img:hover {
  transform: scale(1.15);
}

@media (max-width: 768px) {
  .fitur img {
    max-width: 100%;
  }
}

@media (min-width: 1024px) {}

@media (max-width: 500px) {}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<section id="fitur" class="fitur section-bg">
  <div class="container" data-aos="zoom-in">

    <div class="section-title">
      <p style="margin-top: 100px;">Fitur</p>
      <h3>Aplikasi</h3>
    </div>

    <div class="row">

      <div class="col-lg-2 d-flex align-items-center justify-content-center">
        <img src="assets/img/aplikasi/01.png" class="img-fluid" alt="">
        <p class="sub">Jual Sampah</p>
      </div>

      <div class="col-lg-2 col-half-offset d-flex align-items-center justify-content-center">
        <img src="assets/img/aplikasi/02.png" class="img-fluid" alt="">
        <p class="sub">Harga Real Time</p>
      </div>

      <div class="col-lg-2 col-half-offset d-flex align-items-center justify-content-center">
        <img src="assets/img/aplikasi/05.png" class="img-fluid" alt="">
        <p class="sub">Transaksi Terdata</p>
      </div>

      <div class="col-lg-2 col-half-offset d-flex align-items-center justify-content-center">
        <img src="assets/img/aplikasi/06.png" class="img-fluid" alt="">
        <p class="sub">Layanan Komunikasi</p>
      </div>

      <div class="col-lg-2 col-half-offset d-flex align-items-center justify-content-center">
        <img src="assets/img/aplikasi/07.png" class="img-fluid" alt="">
        <p class="sub">Rangkuman Transaksi</p>
      </div>

    </div>

    <div class="d-flex">
      <a href="#" class="btn-get-started"></a>
    </div>

  </div>
</section>

结果是：

文字在图片旁边，你能帮我看看怎么把它放在图片下面吗？

Answer 1

将 flex-column 添加到包含图像和文本的父级 div。像这样

<div class="col-lg-2 d-flex align-items-center justify-content-center flex-column">
    <img src="assets/img/aplikasi/01.png" class="img-fluid" alt="">
    <p class="sub">Jual Sampah</p>
  </div>

flex方向默认为行，需要设置为列，这样图文就可以叠加了

文本不想在图像下方。使用 bootstrap

text does not want to be under the image. using bootstrap

html

css

bootstrap-4