Hey there, I'm facing an issue with the layout of 6 images on my website. Currently, they are stacked vertically, but I want them to be displayed horizontally and centered. Additionally, 4 of these images have captions that should appear below each image. Could someone please assist me with this? Thank you!
Below is my HTML:
<div class="container-fluid">
<div class="container-of-images">
<img src="chick2.png">
<figure>
<img id="img1" src="dice6.png">
<figcaption>Testing</figcaption>
</figure>
<figure>
<img id="img2" src="dice6.png">
<figcaption>Testing</figcaption>
</figure>
<figure>
<img id="img3" class="threeChoices" src="dice6.png">
<figcaption>Testing</figcaption>
</figure>
<figure>
<img id="img4" class="fourChoices" src="dice6.png">
<figcaption>Testing</figcaption>
</figure>
<img src="chick1.png">
</div>
</div>
And here is my CSS:
body {
background-color: #b6e6bd;
line-height: 1.6;
}
.container-fluid {
padding: 1% 20%;
margin: auto;
text-align: center;
}
img {
width: 100px;
line-height: 0;
margin: 0 1%;
display: flex;
justify-content: center;
}
figcaption {
text-align: center;
width: 100px;
}