html - 如何将未知/动态高度的图像置于未知/动态高度的 float div 中？

Question

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

所以我有一个容器/父 div，在它里面有一个左右 div。容器垂直拉伸(stretch)以适应左右 div 中较大的一个(两者的高度都未知)。左边的 div 向左浮动，其中有一个未知尺寸的图像，右边的 div 将有文本(关于图像)。从概念上讲，我想要一个垂直居中的图像位于其父 div 的左侧，文本位于图像的右侧。如果除了 float (例如)之外还有其他结构可以做到这一点，我很开放。

我已经在 jsfiddle 上制作了一个模板:http://jsfiddle.net/hoopadoop/GEkaW/

我试过显示:表格； with vertical-align: middle;, background:url(image) no-repeat center center;, 和带边距的东西。到目前为止唯一有效的实际上是使用 html <tables> ，但我宁愿坚持使用 CSS。

也许我只是不断地犯语法错误或一些愚蠢的事情，但我似乎无法让任何事情发挥作用。非常感谢任何帮助

Answer 1

点这里

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

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

.middle
{
    margin-top:50%;
}

希望对你有帮助