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

Question

我有以下情况：

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

谢谢。

编辑：

也许我没有说得足够清楚，以至于我事先不知道容器有多少内容，从几行到一堵文字墙，所以任何依赖于它的高度的解决方案都行不通（这就是我的问题：P )

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

Answer 1

你应该看看Chris Coyier 的 Centering in the Unknown。Imo 它是垂直居中圣杯的非常可靠的解决方案。

Answer 2

我不会阻止在这里使用表格）））如果您使用vertical-align: middle在其td元素上设置了两个单元格的表格-它将完美（并且轻松！！！）解决您的问题。

如果您想要两个容器，其中一个（带有图像的那个）将浮动到右侧并需要居中 - 我会说您必须避免float为此使用属性。因为a）据我了解，您不需要将左侧的内容放在图像下方，对吗？b) 浮点数是块级元素，即使您设置display: table-cell了也无法更改它，浏览器仍会将其呈现为display: block- 这使我得出结论，您无法通过 css 将其居中（至少通过表示我知道）。

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

html:

<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>

CSS：

#container {
    display: table;
    width: 100%;
}
.content, .i_used_to_be_floated_right {
    display: table-cell;
    vertical-align: middle;
}
.content {
    background: green;
    width: 80%;
}
.i_used_to_be_floated_right{
    background: red;
    width: 20%;
}

可以在这里看到工作示例：http: //jsfiddle.net/skip405/sDXMj/1/

但是，如果您需要 ie7 - 我会投票支持我在一开始所说的表格解决方案。