jquery - 在 jquery masonry 中垂直居中文本

Question

我正在使用 jquery 砌体来显示图像。在这些图像中，我有脚本可以让我翻转和淡入标题。但是，我希望它们在框内完全居中。使用 Jquery 砌体，没有绝对的高度值。有没有像水平方向一样垂直放置东西（类似于：margin-right：auto；margin-left：auto；clear：both；）

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

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

感谢您所有的帮助！

杰夫

Answer 1

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

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();