<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%;
}
我想要的是:
标记的小提琴:http://jsfiddle.net/LjyzM/
答案 0 :(得分:0)
将B的高度设置为与A相同的高度,然后将图像的上边距设置为容器高度减去图像高度除以2:
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);
});
答案 1 :(得分:0)
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;
}