可变高度容器内元素的垂直中间

Question

我有以下情况：

一个变量高度div（#container），内部有一个图像（放在另一个div中的图像），我需要浮动：右和在中间垂直对齐。怎么做？

感谢。

修改：

也许我没有说清楚，我事先不知道容器有多少内容，从几行到一个文本墙，所以依赖于它的高度的任何解决方案都赢了工作（这是我的问题：P）

这是一个小提琴，其中包含对齐图像的可能内容示例：http://jsfiddle.net/9DbmN/

Answer 1

你应该看看Chris Coyier的Centering in the Unknown。 Imo是垂直居中圣杯的绝佳解决方案。

Answer 2

我不鼓励在这里使用表格）））如果你使用在其vertical-align: middle元素上设置了td的双单元格表 - 它将完美（并且很容易!!!）解决你的问题

如果你想拥有两个容器，其中一个容器（带有图像的容器）将浮动到右边并需要居中 - 我说你必须避免使用{{1}这个属性。因为a）据我所知，你不需要你左边的内容就可以了，不是吗？ b）浮点数是块级元素，即使您设置float也无法更改它，浏览器仍会将其呈现为display: table-cell - 这会让我得出结论： 39;设法用css来中心（至少通过我意识到的方式）。

如果您不需要ie7支持，可能的解决方法可能是：

HTML：

display: block

的CSS：

<div id="container">
    <div class="content">Content goes here, vertically aligned with the image</div>
    <div class="i_used_to_be_floated_right">Image goes here</div>
</div>

可以在此处看到实时工作示例：http://jsfiddle.net/skip405/sDXMj/1/

但是如果你需要ie7 - 我会投票支持我在一开始就提到的表格解决方案。