CODEWITHSUNDEEP
htmlcss
Jesus
Jesus

Reputation: 485

Place text below an image

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.

Upvotes: 0

Views: 225

Answers (2)

Vishal_VE
Vishal_VE

Reputation: 2137

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

Upvotes: 0

jons
jons

Reputation: 310

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>

Upvotes: 1

Related Questions