javascript - 在流体容器中垂直居中图像

Question

<div id="A"> //Fluid Width And Height
Some content..............
</div>

<div id="B">
   <img src='xyz.jpg'>//Fluid Width and Height
</div>

CSS：

#A {
width:50%;
min-height:50px;
}
#B{
min-height:50px;
}
#B > img {
width:55%;
}

我想要的是：

1. Div B 应始终与 Div A 具有相同的高度。
2. Div B 内的图像应在 Div B 中垂直居中。
3. 在 Div A 和 B 完全加载并应用了它们各自的 css 后触发此代码的方法。

标记的小提琴：http: //jsfiddle.net/LjyzM/

Answer 1

将 B 的高度设置为与 A 相同的高度，然后将图像的上边距设置为容器高度减去图像高度除以二：

var h   = $('#A').height(),
    img = $('#B').height(h).find('img');

img.css('margin-top', (h-img.height())/2);

小提琴

编辑：

为确保图像已加载，您可以使用以下技巧：

$('img', '#B').one('load', function() {
    var h = $('#A').height();

    $('#B').height(h);
    $(this).css('margin-top', ( h - $(this).height() ) / 2);
}).each(function() {
    if(this.complete) $(this).load();
});

再次编辑：

如果您必须等待更多内容加载，请执行以下操作：

$(window).on('load', function() {
    var h   = $('#A').height(),
        img = $('#B').height(h).find('img');

    img.css('margin-top', (h-img.height())/2);
});

Answer 2

http://css-tricks.com/centering-in-the-unknown/

<div class="something-semantic">
   <div class="something-else-semantic">
       Unknown stuff to be centered.
   </div>
</div>

.something-semantic {
   display: table;
   width: 100%;
}
.something-else-semantic {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}