显示不同高度图像的流体 div 的垂直对齐

Question

好吧..这就是交易。我一直在修改不久前购买的 WordPress 主题，但遇到了困难。 不幸的是，我不懂 CSS。我可以调整一些东西，但我怀疑我是否能够自己解决这个问题。所以，这里是一个求助:)

网站和 div 的代码如下： http://photography.hamsterwheelproject.com/category/photo-of-the-day/

element.style {
overflow: hidden;
z-index: 0;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
display: block;
}

#superbgimage img {
position: static !important;
height: auto !important;
width: 100% !important;
top: 0 !important;
margin: 0 auto;}

这个想法是让图像始终垂直居中显示。我想将宽度保持为 100% 并水平填充屏幕，同时保持照片的纵横比。

谢谢！

Answer 1

如果你可以给你的容器一个固定的高度，那么使用CSS就很容易：

#superbgimg {
    line-height:800px; /* height of screen */
}

#superbgimg img {
    vertical-align:middle;
}

如果你不能在CSS中设置固定的高度，你可以很容易地使用JQuery（或任何其他javascript解决方案）动态设置它：

$(function(){
    $('#superbgimg').css('line-height',$('#superbgimg').height() + 'px');
});