Issue
I’m trying to have 3 figures side by side, each containing an image (that has a link in it), and a caption that’s centered on the top of the image.
So far, I’ve got this:
figure {
display: table;
width: 50%;
margin:0;
}
figcaption {
display: table-caption;
caption-side: top;
}
#content {
max-width: 80%;
height: 80%;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: auto;
text-align: center;
}<div id="content" class="center">
<div>
<figure style="float:left;">
<a href="#">
<img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat" width="30%">
</a>
<figcaption style="text-align:center">Cute cat </figcaption>
</figure>
<figure>
<a href="#">
<img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat 2" width="30%">
</a>
<figcaption style="text-align:center">Cute cat 2 </figcaption>
</figure>
</div>
</div>But when I try to add a third (or fourth, for that matter) image, the whole thing malfunctions.
I’ve tried using style="float:right; on the third image, which leads to it being below the other 2 figures on another line(of course, after reducing the width of figure first).
Essentially what I want the end result to be is to be able to put any number of images (3 and 4 for my use, but generalizing the solution will help people with the same problem) side by side, while each image has some text over it (hence the figure and figcaption CSS rules, which display the figcaption above the picture)
Solution
.flex{display: flex;}
figure {
display: table;
width: 50%;
margin:0;
}
figcaption {
display: table-caption;
caption-side: top;
}
#content {
max-width: 80%;
height: 80%;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: auto;
text-align: center;
}<div id="content" class="center">
<div class="flex">
<figure >
<a href="#">
<img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat" width="30%">
</a>
<figcaption style="text-align:center">Cute cat </figcaption>
</figure>
<figure >
<a href="#">
<img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat" width="30%">
</a>
<figcaption style="text-align:center">Cute cat </figcaption>
</figure>
<figure >
<a href="#">
<img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat" width="30%">
</a>
<figcaption style="text-align:center">Cute cat </figcaption>
</figure>
<figure >
<a href="#">
<img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat" width="30%">
</a>
<figcaption style="text-align:center">Cute cat </figcaption>
</figure>
<figure>
<a href="#">
<img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat 2" width="30%">
</a>
<figcaption style="text-align:center">Cute cat 2 </figcaption>
</figure>
</div>
</div>Answered By – Aman Sharma
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0