html - 将图像与文本配对，并在 parent 内部居中

Question

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

问题由两部分组成:

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

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

其他要求:该解决方案必须在 IE7 上正常工作，在 IE6 上应该也能正常工作(可能不完美，但元素至少应该是可见的)。

我也许可以使用网络上描述的一种技术来完成#2，但我不太确定#1，尽管直觉上它似乎应该是最简单的。

Answer 1

Here's one for #1

首先:我使用内联元素，因为在 IE7 中 display: inline-block 仅适用于自然内联的元素(虽然它不漂亮，但你可以在其中放置 block 级元素，我'我决定不这样做)。我设置了小盒子的大小，在上面设置了一个 -height/2 上边距，然后把它放在中间。

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

我忘了 IE7 不支持最小高度。我在容器中添加了一个高度为绿色的填充，并在文本 block 中添加了一个负边距，因此它不会显示在上面。

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

你必须在 .container 中添加一个  ，否则它不会居中。