How to make a figcaption not move the image? - html

Question

I am looking to put a figcaption onto an image and not have it move the image from its original spot without the figcaption`. Here is my CSS for figcaption.
Here is my code for an image with a figcaption.
figcaption {
text-align: center;
display: inline-block;
}
<figure>
<a href="https://ibb.co/CbSzPRr">
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
</a>
<br>
<figcaption>
<div>Retouched, Untagged</div>
</figcaption>
</figure>
Here is also a screenshot of what it looks like. The image on the left is where the image should be. The image on the left has a figcaption and it's slightly up to the left.
I am very new to coding. Anything suggestions would help. Thank you! I think there is a really simple solution to this that I'm missing.

Answer 1

Are you looking for something like this -
figure {
display: block;
float: left;
width: 200px;
margin: 20px
}
figcaption {
display: block;
text-align: center;
width: 100%;
}
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>Retouched, Untagged</div>
</figcaption>
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>The image stays in same row without begin displaced</div>
</figcaption>
</figure>
The above code will display all images in single row and all the captions beneath them. The images won't be misaligned in a single row.
Another way of doing it would be to bring the captions over the image. This can be done as -
.row {
display: flex;
justify-content: flex-start;
flex-wrap: nowrap;
overflow-X: scroll;
}
figure {
display: block;
float: left;
position: relative;
margin: 30px 15px
}
figcaption {
position: absolute;
bottom: 0;
background: #fff;
opacity: .7;
width: 100%;
text-align: center;
}
.row-separator {
height: 5px;
background-color: grey;
margin: 20px 10px;
}
<div class="row">
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>Retouched, Untagged</div>
</figcaption>
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>caption on image</div>
</figcaption>
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>caption on image</div>
</figcaption>
</figure>
</div>
<div class="row-separator"></div>
<div class="row">
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>Retouched, Untagged</div>
</figcaption>
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>caption on image</div>
</figcaption>
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>caption on image</div>
</figcaption>
</figure>
</div>
Hope this helps !