为什么我的 figcaption 出现在图片的右上角？答案

【问题标题】：Why my figcaption appears at the top right of the image?为什么我的 figcaption 出现在图片的右上角？
【发布时间】：2020-12-07 01:16:48
【问题描述】：

当我插入此代码时，所有图像的下方都有其 figcaption，但 SPICED RUM 的 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;
}

【问题讨论】：

标签： html figcaption

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：