在图片下方放置文字

Question

我是 CSS 新手，我想在带有链接的图像下方放置文本，所以我做了一些基本的 html 和 css 内容，例如：

 .programs_content { display: grid; grid-template-columns: auto auto auto auto; grid-gap: 10px; padding: 20px; } .rect-img-container { position: relative; } .rect-img-container::after { content: ''; display: inline-block; padding-bottom: 100%; } .rect-img { position: absolute; width: 100%; height: 100%; object-fit: cover; } .caption { display: block; }

 <div class="programs_content"> <div class="rect-img-container"> <a href="#"> <img class="rect-img" src="1.png" alt="" /> </a> </div> <span class="caption">text1</span> <div class="rect-img-container"> <a href="#"> <img class="rect-img" src="2.png" alt="" /> </a> </div> <span class="caption">text2</span> <div class="rect-img-container"> <a href="#"> <img class="rect-img" src="3.png" alt="" /> </a> </div> <span class="caption">text3</span> <div class="rect-img-container"> <a href="#"> <img class="rect-img" src="4.png" alt="" /> </a> </div> <span class="caption">text4</span> </div>

但是文本总是在图像旁边，我尝试使用内联块显示文本和图像，但没有用。

Answer 1

对于字幕，最好使用 HTML 中内置的字幕。 在此处查看更多详细信息，但这里有一个 HTML 示例：

<figure>
  <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

Answer 2

    <style>
.programs_content {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
  padding: 20px;
}

.rect-img-container {
  position: relative;
}

.rect-img-container::after {
  content: '';
  display: inline-block;
  padding-bottom: 100%;
}

.rect-img {
  /* position: absolute; */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.caption {
  display: block;
}
  </style>
<div class="programs_content">
  <div class="rect-img-container">
    <a href="#">
      <img class="rect-img" src="1.png" alt="" />
    </a>
    <span class="caption">text1</span>
  </div>
  

  <div class="rect-img-container">
    <a href="#">
      <img class="rect-img" src="2.png" alt="" />
    </a>
    <span class="caption">text2</span>
  </div>
  
  
  <div class="rect-img-container">
    <a href="#">
      <img class="rect-img" src="3.png" alt="" />
    </a>
    <span class="caption">text3</span>
  </div>
  
  <div class="rect-img-container">
    <a href="#">
      <img class="rect-img" src="4.png" alt="" />
    </a>
    <span class="caption">text4</span>
  </div>
  
</div>