Question

关于在div中垂直对齐图像的另一个问题，但我认为我的不同于我在这里找到的其他人。我似乎无法找到适合我情况的解决方案。

我有一个100％宽度的DIV（它的容器，它向左浮动并具有设置的像素宽度）并且具有设置的像素高度。我有一个图像，我定位绝对，以使其在DIV内容的背景。图像是流动的，宽度为100％。

一切运作良好，但我希望图像垂直对齐到容器的中间，高度未知。

以下是一些示例代码，展示了我正在尝试做的事情：

<div class="container">
  <div class="image-wrapper">
    <img src="http://farm5.staticflickr.com/4111/4968056789_d872094672_o.jpg" 
       width="100%" />
  </div>
  <p>Some text</p>
</div>

一些示例CSS：

.container {
  width:100%;
  margin-top:10px;

  height:100px;
  overflow:hidden;
}

.image-wrapper {
  position: relative;
}
.image-wrapper > img {
  position: absolute;
  z-index: -1;
}
p {
  text-align: center;
  padding-top: 10px;
  color:#fff;
  font-weight: bold;
}

但是花应该出现在容器div中可见的中心。

有什么想法？我试图避免任何Javascript大小调整（外部容器，此示例中未显示，已经调整大小）。我并不反对更多的DIV，桌子......无论你得到什么！

一个jsFiddle来演示这个： http://jsfiddle.net/JonMcL/sNz9h/

Answer 1

为什么不选择background-image属性？这允许垂直居中...

http://jsfiddle.net/urrWS/

Answer 2

假设您只想缩小图像并且不将其拉伸超出其原始分辨率，这应该可以解决问题。涉及一点jQuery，但它是最小的。从本质上讲，这会调整window.resize事件中IMG的上边距。

HTML

<div id="container">
    <img id="image" src="image.jpg"> <!-- native size is 480x300 -->
</div>

CSS

#container {
  margin: auto;
  width: 80%;
  height: 300px;
  border: 1px solid gray;
}

#image {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: auto;
}

的jQuery

function adjustImage() {
    $("#image").css('margin-top', ($("#container").height() - $("#image").height()) / 2);
}

$(window).load(function() {
    adjustImage();

    $(window).resize(function() {
        adjustImage();
    });
});

Answer 3

如果我得到你需要的东西我会建议你通过css设置背景图像，然后你可以正确设置位置等。

.container {
width:100%;
margin-top:10px;
background-image:url("http://farm5.staticflickr.com/4111/4968056789_d872094672_o.jpg");
background-repeat:no-repeat;
background-position:left center;
height:100px;
overflow:hidden;

}

http://jsfiddle.net/sNz9h/6/

流体图像，在宽度流体DIV内垂直对齐（中间）

3 个答案: