css - Figcaption は、画像がインラインで整列するのを防ぎます

Question

3 行 3 列の画像を含むナビゲーション ボックスを作成しています。私の目標は、各画像の下にテキストを追加することでした。今日、「figcaption」に出くわしました。完璧なタグのように見えますが、適切に表示するように縫い合わせることができません。

問題 「figcaption」タグを追加するまで、画像は「インライン」で正しく表示されます。テキストは各画像の下にブロックで表示されます (私は推測します)。

私が使用している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>

そして、ここにcssがあります

.menu div {
    padding: 0;}
.menu li a{display: inline;}
.menu a img{
    width:32.1%; height:auto; 
    }

ここにフィドルがあります

ありがとう