垂直對齊流體容器中的圖像

Question

尋找其他例子，但找不到任何。我的圖像容器使用最大寬度/最大高度，因此圖像縮放到容器，但我似乎無法將它設置爲自動上邊距/下邊距或垂直對齊而不設置高度。

html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0px; 
} 

#container { 
    border: solid 1px #000; 
    height: 100%; 
    width: 65%; 
    position: absolute; 
    right: 0; 
} 

#container img { 
    max-width: 100%; 
    max-height: 100%; 
    display: block; 
    margin: auto; 
    vertical-align: middle;  
}​ 


<div id="container"><img src="http://rack.2.mshcdn.com/media/ZgkyMDEyLzEyLzE2LzAzL3NjcmVlbnNob3QyXzJlb2RkLnBuZwpwCXRodW1iCTg1MHg1OTA+CmUJanBn/5b500a85/9ee/screen-shot-2012-12-14-at-9-45-01-am.jpg" /> 
</div>​ 

http://jsfiddle.net/beftR/

Answer 1

我只能得到它通過添加另一個div命名爲#container2你的代碼工作。我用table/table-celldisplay類型來做到這一點。這是我做的（jsFiddle here）。

html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0px; 
} 

#container { 
    border: solid 1px #000; 
    height: 100%; 
    width: 65%; 
    position: absolute; 
    right: 0; 
    display:table; 
} 

#container2 { 
    display:table-cell; 
    vertical-align:middle; 
} 

#container img { 
    max-width: 100%; 
    max-height: 100%; 
}​ 

<div id="container"> 
    <div id="container2"> 
    <img src="http://rack.2.mshcdn.com/media/ZgkyMDEyLzEyLzE2LzAzL3NjcmVlbnNob3QyXzJlb2RkLnBuZwpwCXRodW1iCTg1MHg1OTA+CmUJanBn/5b500a85/9ee/screen-shot-2012-12-14-at-9-45-01-am.jpg" /> 
    </div>​ 
</div>