為什么我的 figcaption 出現在圖片的右上角？

Question

當我插入此代碼時，所有圖像下都有它們的 figcaption，但 SPICED RUM 在右上方 position 上有它的 figcaption。 如何解決？ 這是 HTML 代碼：

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

這是 CSS 代碼：

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

Answer 1

你錯過了那個人物周圍的<figure>和</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>

Answer 2

您的 HTML 無效，您在第二個元素上缺少figure標簽。

您可以在https://validator.w3.org/ 中驗證您的 HTML 。

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