css - 在流体容器中垂直对齐图像

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-cell displaytype 来做到这一点。这是我所做的（此处为jsFiddle）。

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>