Reputation: 485
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
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
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