使用Display:Table Cell为图像添加标题

Question

我试图得到一个标题显示在一个图像上，并有它的中心水平和垂直使用display:table-cell。

一个具体的例子是http://ollymoss.com -如何，悬停，每个海报的标题出现，并垂直/水平居中。我检查了元素，看到他们正在使用Display: Table-cell，但我无法复制它。

如果有人碰巧知道一种方法使这个工作，那将是伟大的!

这是有问题的页面:http://sathyaram.com/graphic

我试图让这些标题为每个瓷砖出现在瓷砖上，垂直/水平居中。

如果有比display:table-cell更好的方法，我很想知道!我知道你可以使用位置:绝对/亲戚，但我希望它是响应的，我不确定这将如何工作!

我正试图在CSS中具体做到这一点-不知道如何使用jQuery!

非常感谢!

Answer 1

如果你想在水平和垂直位置显示标题，你可以在css中设置:

.yourTitleWrap {
    text-align: center;
    width: 100%;
    height: 50px /* with 50px for example ... */
    position: absolute;
    top: calc(50% - 25px);
}

对于顶部值，25px代表高度/2，通常情况下，它应该可以工作，并将您的标题居中在父div的中心。