将图像与父级中的文本和中心配对

Question

我正在尝试复制这个结构：http://kaitnieks.com/images/divme.png

这个问题由两部分组成：

1)如何创建中间框，使其扩展到包含红色图像和蓝色文本所需的大小；

2)如何在绿色框内水平和垂直居中所述框；

附加要求:解决方案必须在IE7上工作良好，并且应该在IE6上工作(可能不完美，但元素至少应该是可见的)。

我也许可以使用网络上描述的技术之一来做#2，但我对#1不是很确定，尽管直觉上它看起来应该是容易的。

Answer 1

Here's one for #1

首先:我使用内联元素，因为在IE7中，display: inline-block只适用于自然内联的元素(虽然它不是很好，但您可以在其中放入块级元素，我决定不这样做)。我设置了小方框的大小，在上面设置了-height/2上边距，并将其放置在中间位置。

至于#2，如果你有一个固定的绿色高度，因为整个东西是一个内联块，你可以更新它的like this。它将line-height设置为元素的高度，并将黑色垂直居中放置。如果需要，也可以在.green上设置text-align: center。

我忘了IE7不支持min-height。我在容器中添加了高度为绿色的填充，在文本块中添加了负边距，因此它不会在上面显示。

Final fiddle with min-height fixed (forgot IE7不支持此功能，您也可以通过单击blue来更改文本的长度)。

但是，您必须向.container添加一个 ，否则它将不会居中。

Answer 2

1)如果不设置宽度或高度，元素将根据其内容自动调整大小

2)我的感觉是水平居中应该是可能的；但是如果高度是可变的，你需要一些javascript来垂直居中。所以你可以使用javascript来定位整个盒子。

用可变高度垂直居中是一件很糟糕的事情。如果你坚持只用css来尝试，this链接是一个很好的读物。