如何在未知/动态高度的浮动 div 中将未知/动态高度的图像居中？

Question

我看到到处都张贴了类似的东西，并且在过去几天里尝试了很多，但似乎无处可去。我的目标是纯 CSS 解决方案。

所以我有一个容器/父 div，里面有一个左右 div。容器垂直拉伸以适应较大的左右 div（两者的高度都未知）。左侧 div 向左浮动，其中包含未知尺寸的图像，右侧 div 将包含文本（关于图像）。从概念上讲，我希望在其父 div 的左侧有一个垂直居中的图像，并在图像的右侧显示文本。如果除了浮点数之外还有其他结构可以做到这一点（例如），我很乐意。

我在 jsfiddle 上做了一个模板：http://jsfiddle.net/hoopadoop/GEkaW/

我试过 display: tables;垂直对齐：中间；背景：url（图像）不重复中心中心；和有边距的东西。到目前为止唯一有效的是实际上使用 html <tables>，但我宁愿坚持使用 CSS。

也许我只是不断地弄错语法或一些愚蠢的东西，但我似乎无法得到任何工作。非常感谢任何帮助

Answer 1

在这里查看

http://jsfiddle.net/9PkxA/2/

我在左侧 div“中间”添加了新类并定义了

.middle
{
    margin-top:50%;
}

希望这会有所帮助

Answer 2

为img 标签添加margin-top: 50% 规则应该使图像大致垂直居中。