Aligning images with captions side by side - html

Question

So I've spent the last hour or so trying to figure out how to put captioned images next to each other. Most solutions/questions other people have don't work when I try to add text below it using figcaption or something of that sort.
I want the text to be underneath the images and move with the images but for some reason it moves the other image to another layer when I add text. Any help would be greatly appreciated. Thank you.
(This is only a small portion of it because there's a lot of other stuff not related to this issue in that style)
.gunimage {
display: inline-block;
margin-left: auto;
margin-right: auto;
width: 15%;
padding-left: 20px;
}
#images {
text-align: center;
}
<div id="images">
<img class="gunimage" border="0" alt="idk" src="gg.png" /></a>
<p>this is text</p>
<img class="gunimage" border="0" alt="idk" src="gg2.png" /></a>
<p>this is also text</p>
</div>

Answer 1

This method uses HTML 5 figure and figcaption elements, and CSS 3 flexbox.
#images {
display: flex;
justify-content: center;
}
figure {
text-align: center;
}
<div id="images">
<figure>
<img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
<figcaption>this is text</figcaption>
</figure>
<figure>
<img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
<figcaption>this is also text</figcaption>
</figure>
</div>
NOTE: Flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes, use Autoprefixer. More details in this answer.

Answer 2

Here is a solution using floats
.gunimage {
display: inline-block;
margin-left: auto;
margin-right: auto;
width: 15%;
}
.half {
width:50%;
float: left;
}
#images {
text-align: center;
width: 100%;
}
<div id="images">
<div class="half">
<img class="gunimage" border="0" alt="idk" src="gg.png">
<p>this is text</p>
</div>
<div class="half">
<img class="gunimage" border="0" alt="idk" src="gg2.png">
<p>this is also text</p>
</div>
</div>