Css Figcaption防止图像对齐

我正在构建一个包含3行3列图像的导航框。我的目标是在每张图片下面添加一些文字。我今天遇到了“figcaption”，虽然它的接缝像一个完美的标签，但我无法接缝使其正确显示

问题 在我添加“figcaption”标记之前，图像将正确显示为“inline”。文本出现在我假设的块中，在每个图像的下面，这很好。。但它也会将下一个图像强制到新行上，即使内联块已应用于父容器

我使用的html如下所示

<section class="menu">
<h1>Menu</h1>
<br /><br />
    <div>
    <a href=""><img src="img/image.png"><figcaption>Caption</figcaption></a>
    <a href=""><img src="img/image.png"><figcaption>Caption</figcaption></a>
    <a href=""><img src="img/image.png"><figcaption>Caption</figcaption></a>        
    </div>

        ***Div repeated twice***

</section>

这是一个

谢谢

根据MDN，需要放在标签内：

以下是更新的HTML结构：

<section class="menu">
<h1>Menu</h1>
<br />
    <div>
        <figure>
            <a href="">
                <img src="http://placekitten.com/100/100">
            </a>
            <figcaption>Caption</figcaption>
        </figure>
        <figure>
            <a href="">
                <img src="http://placekitten.com/100/100">
            </a>
            <figcaption>Caption</figcaption>
        </figure>
        <figure>
            <a href="">
              <img src="http://placekitten.com/100/100">
            </a>  
            <figcaption>Caption</figcaption>      
         </figure>
    </div>
</section>

---

哦，有意思，我以前从未见过Figcapton标签！听起来很好吃…值得注意的是，您有选择器li a，但标记中没有li标记，因此这里的样式不适用。谢谢！是时候做一些修改了=谢谢，但目标是创建一个网格。我遇到的问题是在一行中对齐三个带标题的图像。请注意，figcaption还必须是图形的第一个或最后一个直接子级。根据您的示例，figcaption作为元素的子级是无效的。@Alohci很好，我已经更新了示例，因此它应该是有效的

<section class="menu">
<h1>Menu</h1>
<br />
    <div>
        <figure>
            <a href="">
                <img src="http://placekitten.com/100/100">
            </a>
            <figcaption>Caption</figcaption>
        </figure>
        <figure>
            <a href="">
                <img src="http://placekitten.com/100/100">
            </a>
            <figcaption>Caption</figcaption>
        </figure>
        <figure>
            <a href="">
              <img src="http://placekitten.com/100/100">
            </a>  
            <figcaption>Caption</figcaption>      
         </figure>
    </div>
</section>

.menu div {
    padding: 0;}
.menu figure {display: inline-block;
    width:100px;
}
.menu a img{
    height:auto; 
}