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

Question

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;
}

score 1 · Answer 1 · answered Aug 17 '20 at 21:16

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>

score 0 · Answer 2 · answered Aug 17 '20 at 21:15

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>

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

2 Answers2