在jquery砌体内垂直居中文本

Question

我正在使用jquery砌体来显示图像。在这些图像中，我有脚本允许我翻转和淡入标题。但是我希望它们完全集中在盒子里。使用Jquery砖石，没有绝对的高度值。无论如何都要像水平一样垂直放置物体 （相近： margin-right：auto; 保证金左：自动; 明确：两者;）

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

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

感谢您的所有帮助！

杰夫

Answer 1

试试这个：你要做的第一件事是为你的包含a：link元素设置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();