Why my figcaption appears at the top right of the image?

421 Views Asked by At

when I insert this code all images have their figcaptions under them but SPICED RUM has its figcaption on the right top position. How to fix it? this is the HTML code:

<div class="tea-image">
                <figure>
                    <img src="./ressources/images/img-berryblitz.jpg" alt="Fall Berry Blitz Tea">
                    <figcaption>Fall Berry Blitz Tea</figcaption>
                </figure>
                    <img src="./ressources/images/img-spiced-rum.jpg" alt="Spiced Rum Tea">
                    <figcaption>Spiced Rum Tea</figcaption>
                <figure>
                    <img src="./ressources/images/img-donut.jpg" alt="Seasonal Donuts">
                    <figcaption>Donuts</figcaption>
                </figure>
                <figure>
                    <img src="./ressources/images/img-myrtle-ave.jpg" alt="Myrtle Ave Tea">
                    <figcaption>Myrtle Ave Tea</figcaption>
                </figure>
                <figure>
                    <img src="./ressources/images/img-bedford-bizarre.jpg" alt="bedford Bizarre Tea">
                    <figcaption>bedford Bizarre Tea</figcaption>
                </figure>
        </div>

and this is the CSS code:

.tea-image{
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    justify-content: center;
}
.tea-image img{
    height: 15rem;
    width: 15rem;
    padding-right: 2em;
}
figcaption{
    font-weight: bold;
    text-align: center;
}
2

There are 2 best solutions below

0
Rado On

You have invalid HTML, you have missing figure tag on the second element.

You can validate your HTML in https://validator.w3.org/ .

<div class="tea-image">
                <figure>
                    <img src="./ressources/images/img-berryblitz.jpg" alt="Fall Berry Blitz Tea">
                    <figcaption>Fall Berry Blitz Tea</figcaption>
                </figure>
                <figure>
                    <img src="./ressources/images/img-spiced-rum.jpg" alt="Spiced Rum Tea">
                    <figcaption>Spiced Rum Tea</figcaption>
                </figure>
                <figure>
                    <img src="./ressources/images/img-donut.jpg" alt="Seasonal Donuts">
                    <figcaption>Donuts</figcaption>
                </figure>
                <figure>
                    <img src="./ressources/images/img-myrtle-ave.jpg" alt="Myrtle Ave Tea">
                    <figcaption>Myrtle Ave Tea</figcaption>
                </figure>
                <figure>
                    <img src="./ressources/images/img-bedford-bizarre.jpg" alt="bedford Bizarre Tea">
                    <figcaption>bedford Bizarre Tea</figcaption>
                </figure>
        </div>
0
cssyphus On

You were missing the <figure> and </figure> container tags around that one figure.

.tea-image{
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    justify-content: center;
}
.tea-image img{
    height: 15rem;
    width: 15rem;
    padding-right: 2em;
}
figcaption{
    font-weight: bold;
    text-align: center;
}
<div class="tea-image">
                <figure>
                    <img src="http://placekitten.com/250/250" alt="Fall Berry Blitz Tea">
                    <figcaption>Fall Berry Blitz Tea</figcaption>
                </figure>
                <figure> <!--     <======= HERE        -->
                    <img src="http://placekitten.com/250/250" alt="Spiced Rum Tea">
                    <figcaption>Spiced Rum Tea</figcaption>
                </figure> <!--     <======= HERE        -->
                <figure>
                    <img src="http://placekitten.com/250/250" alt="Seasonal Donuts">
                    <figcaption>Donuts</figcaption>
                </figure>
                <figure>
                    <img src="http://placekitten.com/250/250" alt="Myrtle Ave Tea">
                    <figcaption>Myrtle Ave Tea</figcaption>
                </figure>
                <figure>
                    <img src="http://placekitten.com/250/250" alt="bedford Bizarre Tea">
                    <figcaption>bedford Bizarre Tea</figcaption>
                </figure>
        </div>