Figcaption prevents images from aligning inline - css

Question

I'm building a navigation box with 3 rows and 3 columns of images. My target was to add some text below each image. I came across 'figcaption' today and although it seams like the perfect tag, i can't seam to get it to display properly.
The problem
The images display properly 'inline' until I add the 'figcaption' tags. The text appears in block (i assume), below each image which is great.. but it also forces the next image onto a new line (Even though inline block has been applied to the parent container '').
The html that i'm using goes as follows..
<section class="menu">
<h1>Menu</h1>
<br /><br />
<div>
<img src="img/image.png"><figcaption>Caption</figcaption>
<img src="img/image.png"><figcaption>Caption</figcaption>
<img src="img/image.png"><figcaption>Caption</figcaption>
</div>
***Div repeated twice***
</section>
And here is the css
.menu div {
padding: 0;}
.menu li a{display: inline;}
.menu a img{
width:32.1%; height:auto;
}
Here is a Fiddle
Thanks

Answer 1

According to MDN, <figcaption> needs to be inside a <figure> tag:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption
Here's an updated HTML structure:
<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>
and associated css:
.menu div {
padding: 0;}
.menu figure {display: inline-block;
width:100px;
}
.menu a img{
height:auto;
}
http://jsfiddle.net/DHM46/5/