顯示不同高度圖像的流體div的垂直對齊

好吧..這是交易。我一直在修改前一段時間購買的WordPress主題，並且我碰到了一堵牆。不幸的是，我不是CSS識字。我可以調整一些東西，但是我懷疑自己能夠解決這個問題。所以，在這裏是爲幫助:)顯示不同高度圖像的流體div的垂直對齊

網站和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％並水平填充屏幕，同時保持照片的寬高比。

謝謝！

來源

2011-07-10 Razvan Ciuca

如果你可以給你的容器一個固定的高度，很容易與CSS：

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

#superbgimg img { 
    vertical-align:middle; 
}

如果不能設置你的CSS固定高度，可以動態使用jQuery（或其他任何設置javascript解決方案）很容易：

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

來源

2011-07-10 10:24:35 AlienWebguy

謝謝AlienWebguy！我已經嘗試了第一種解決方案，但沒有任何改變。當然，我只使用Firebug並在飛行中改變它。我將在CSS中進行更改後，我會更新情況。乾杯！ Razvan –

不幸的是，在style.css中進行更改後沒有發生任何事情。以下是代碼現在的樣子： line-height：800px; } ＃內容{ \t position：relative; \t z-index：3; } #superbgimage img { \t position：static！important; vertical-align：middle; \t身高：自動！重要; \t寬度：100％！重要; \t top：0！important; \t margin：0 auto; } –

#superbgimage無法顯示：如果您希望它具有行高，則無。嘗試刪除它並添加'visibility：hidden'，以便佔用DOM中的空間。如果你淡入淡出，你可以很容易地爲不透明動畫$（'＃superbgimage'）。animate（{opacity：0}，500）;會淡出它。不透明度：1會褪色。 – AlienWebguy

顯示不同高度圖像的流體div的垂直對齊

回答

相關問題