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)
CodePudding user response：
.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>CodePudding user response：
For 3-4 image you can provide width to the element. But you can show a defined number of images using width. To show n number of image you can show as table and use css property overflaw:scroll.
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; width:25%">
<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 style="float:left; width:25%">
<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>
<figure style="float:left; width:25%">
<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 style="float:left; width:25%">
<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>CodePudding user response：
firstly remove float and use display: flex;, it is very useful and highly recommended one.
and change the code to like this
#container {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
width: 20%;
display: block;
align-items: center;
justify-content: center;
border: 1px solid;
}
.link {
text-decoration: none;
color: #000;
}
.image-container {
display: inline-block;
width: 100%;
}
.caption {
text-align: center;
} <div id="container">
<div class="item">
<a href="#" class="link">
<h3 class="caption">Cute cat </h3>
<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" class="image-container">
</a>
</div>
<div class="item">
<a href="#" class="link">
<h3 class="caption">Cute cat </h3>
<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" class="image-container">
</a>
</div>
<div class="item">
<a href="#" class="link">
<h3 class="caption">Cute cat </h3>
<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" class="image-container">
</a>
</div>
</div>