Place text below an image

Question

I'm new in CSS and I want to place text below an image with link, so I do some basic html and css stuff like:

 .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>

But the text is always next to the image, I try to display block the text and the image with inline block but it didn't work.

Answer 1

For captions, you would be best off using the captions built into HTML. Check out more details here , but here is an example of the 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>