Centering two images side-by-side with captions

I'm making a webpage, and I want a row of two images in each with captions underneath them. I already got the images set up like this, I just need the captions:

<div class = "container">
    <img class = "pic" src = "palibutt.jpg">
    <img class = "pic" src = "aaah_lionpali.jpg">
    <img class = "pic" src = "fantapali.jpg">
    <img class = "pic" src = "paliworshipsun.jpg">
    <img class = "pic" src = "dawpali.jpg">
    <img class = "pic" src = "omgpali.jpg">
    <img class = "pic" src = "paliberries.jpg">
    <img class = "pic" src = "olderpaliberries.jpg">
    <img class = "pic" src = "ipadpali.jpg">
    <img class = "pic" src = "palinormal.jpg">
</div>

.pic {
    border-radius:100px;
    padding:10px;
    width:550px;
}

.pic {
    border-radius:100px;
    padding:10px;
    width:550px;
}

I already tried the figure and figcaption tags, they made only one image be in the center.