在液體容器垂直居中圖像

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. 股利乙方應始終具有相同的高度股利A.
2. 圖像內股利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); 

FIDDLE

編輯：

確保加載圖像，你可以使用這一招：

$('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; 
}