jquery masonry 中的垂直居中文本

Question

我正在使用 jquery masonry 来显示图像。在这些图像中，我有脚本允许我滚动和淡入标题。不过我希望它们能够在盒子内完美居中。对于 Jquery 砌体，没有绝对的高度值。有没有办法像水平放置一样垂直放置东西 （类似于： 右边距：自动； 左边距：自动； 清晰：两者；）

现在，定位设置为距离顶部 50%，但是在较小的元素上，标题看起来偏离中心。

这是我的进展的链接： http://geoffjohnsondesign.com/inprogress

感谢您的所有帮助！

杰夫

Answer 1

试试这个：您要做的第一件事是为包含的 a:link 元素设置 display: inline-block 和 position:relative （您需要分配一个特定的class 到这些元素，而不是为页面上的每个元素设置它）：

a:link {
    display: inline-block;
    position: relative;
    text-decoration: none;
}

一旦有了它，您就可以为元素设置垂直边距。

.thumbnail .caption {
    margin: 50% auto;
    position: absolute;
    text-decoration: none;
    top: 0;
    width: 100%;
}

看看是否有效。

Answer 2

很晚了，但现在开始了..

您需要将标题放置在 50% 的位置，但将其向上移动标题大小的一半。
为此，我们使用边距。

因此，将 jQuery 代码中隐藏标题的代码替换为

$('.thumbnail .caption')
    .css({ marginTop: function(elem,val){ return $(this).outerHeight()/-2; } })
    .hide();