Html 在CSS响应照片库中居中图像，带有标题

我的目标是有一个简单的响应CSS照片库，其中 （a） 图像在每行内垂直居中 （b） 每行图像水平居中 （c） 标题在每个图像下方水平居中

我一直在尝试以下代码：

1.中置U形块{
明确：两者皆有；
显示：块；
左边距：自动；
右边距：自动；
文本对齐：居中；
}
.img_与_链接{
填充：0.5em；
浮动：左；
显示：表格；
宽度：240px；
高度：240px；
文本对齐：居中；
}
.img_，内部带有链接{
显示：表格单元格；
垂直对齐：中间对齐；
}
带链接img的div.img\u{
显示：内联；
边缘：0.5em；
}
.将_与_img链接{
}
奥林匹克
红杉
海峡群岛

以下是生成的浏览器窗口：

（来源：）

以下是我想要得到的：

（来源：）

注意，这里的困难似乎是由标题引起的。我能够在没有标题的情况下获得该结果（满足标准（a）和（b）），请参阅

---

关于如何修复代码有什么想法吗？谢谢

我觉得这样很好：

.centered_block {
    clear: both;
    margin-left: auto;
    margin-right: auto;
    text-align: center; 
}

.img_with_link {
    padding: 0.5em;
    display: inline-block;
    vertical-align: top;
}

.img_with_link_inside {
    display: table-cell;
    width: 240px;
    height: 240px;
    vertical-align: middle;
}

仅在Chrome、Firefox和IE11中测试。

---

显示：表格单元格

用于允许

垂直对齐：中间
并且为了使某个对象居中，您的块需要有一个宽度。（我想，如果所有子项都有一个宽度，就可以计算出这个宽度……）此外，我还添加了
display:inline块
要替换
浮动：left
我希望能有所帮助，可以在其中放置一个主div和图像（一个示例）

http://jsfiddle.net/step/k5yb8wqo/
.img\u与\u链接不应具有float:left。去掉它看看会发生什么，如果它不起作用，加上明确的：两者都有；并删除表显示属性；你不应该需要它。frenchie比我抢先一步，但这在我的浏览器中起了作用：`.img_with_link{padding:0.5em；display:inline block；width:240px；height:240px；text align:center；}`谢谢你的快速建议。如果我只是删除float:left，那么我每行得到一个图像，而不是我的意图，那就是让图像填满行；行正确居中，但存在两个问题。首先，图像没有垂直居中（这就是为什么我必须使用display:table使垂直对齐：居中；有效）。其次，图像没有正确居中。您可以看到两个中间图像之间的空格现在在（Brown的代码）处不相等。谢谢，我也在Safari（OSX和iOS）上成功地进行了测试。
.centered_block {
    clear: both;
    margin-left: auto;
    margin-right: auto;
    text-align: center; 
}

.img_with_link {
    padding: 0.5em;
    display: inline-block;
    vertical-align: top;
}

.img_with_link_inside {
    display: table-cell;
    width: 240px;
    height: 240px;
    vertical-align: middle;
}

<a>http://jsfiddle.net/step/k5yb8wqo/</a>