css - 流体图像，在宽度流体 DIV 内垂直对齐(中间)

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/