html - CSS Fluid 图像问题...垂直对齐和图像不是从 div 的顶部开始

Question

JS FIDDLE 示例 http://jsfiddle.net/2adv2/

垂直对齐更新

垂直对齐一直有效，直到未达到最大宽度。当图像宽度为最大宽度时，如果我调整大小以增加窗口高度，图像不会移动到 div 的中间，但 div 会扩展。

我面临两个问题

1. 垂直对齐没有发生

2. 图像从 div 向下移动一点，当我大幅调整窗口大小时 - 垂直挤压网页时有点溢出。

告诉我为什么会这样。垂直对齐也行不通。

CSS:

#heroimg {
    position:relative;
    top:0%;
    height:auto;
    vertical-align:middle;
    max-height:100%;
    max-width:100%;

}

#hero {
    position:relative;
    top:0%;
    bottom:40%;
    height:40%;
    text-align:center;
    overflow:hidden;
    background-color:yellow;
}

HTML:
<div id='hero'><img id="heroimg" src="assets/images/dfb.jpg"></div>

Answer 1

恐怕您不能使用 vertical-align 将容器中的内容垂直居中。

但是，您可以将 display:table 和 display:table-cell 与 vertical-align:middle 一起使用，以达到您预期的效果.

这需要两个包装 div 标签围绕您要居中的图像。

下面说明了基本技术:

CSS:

#outer-wrapper {
  display: table;
  width: 100%;
}
#inner-wrapper {
  display: table-cell;
  vertical-align: middle;
}
img {
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

HTML:

<div id="outer-wrapper">
  <div id="inner-wrapper">
    <img src="image.jpg">
  </div>
</div>

请参阅将此技术应用于您的示例:http://jsfiddle.net/2adv2/1/