将图像与文本和中心内部对齐

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设置为元素的高度，并将黑色垂直居中定位。如果需要，您也可以在text-align: center上设置.green。

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

Final fiddle with min-height fixed（忘了IE7不支持，也可以点击blue更改文字的长度。）

您必须向 添加.container，否则它不会居中。

Answer 2

1）如果你没有设置宽度或高度，元素会自动调整其大小

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

垂直居中，高度可变是一个婊子。如果您坚持只使用css进行尝试，this链接就是一个很好的阅读。