左对齐库的最后一行

我有一个图片库,看起来像:

<div class="wrapper">
    <div id="squares">
        <a href="yourlinkhere1.php"><img src="images/galleryimage1.jpg"></a>
        <h5>IMG_114</h5>
    </div>
    <div id="squares">
        <a href="yourlinkhere2.php"><img src="images/galleryimage2.jpg"></a>
        <h5>IMG_115</h5>
    </div>
</div>

CSS看起来像:

.wrapper {
    background: #ff0000;
    text-align: center;
}

#squares {
    background: #00ff00;
    display: inline-block;
    vertical-align: top;
    width: 300px;
}

#squares img {
    max-height: 200px;
    width: auto;
}

#squares h5 {
    margin: 20px 0;
}

我喜欢结果,但我想 IMG_117 IMG_114 ,同时保持绿色区域居中,div中的内容居中…不知道如何在不取消其他内容居中的情况下使div左对齐。

我在想,这可能是对我的css的一个快速调整,或者可能是一些jQuery来向 IMG_117 一行我看到的问题是,这是动态内容,我并不总是知道最后一行中有多少项……可以是一、二或三,如果有一些jQuery,它需要检查并查看行中有多少项,然后添加缺少的列。

我不确定哪种方法最简单,或者是否有更好的解决方案……有人有什么想法,或者有人能为我指出正确的方向吗?

谢谢
乔希