html - 将图像与文本配对并在父对象内居中

Question

我正在尝试复制此构造： http: //kaitnieks.com/images/divme.png

问题由两部分组成：

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

2）如何在绿色盒子内将所述盒子水平和垂直居中；

附加要求：解决方案必须在 IE7 上运行良好，并且应该在 IE6 上运行（可能不完美，但元素至少应该是可见的）。

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

Answer 1

这是＃1的一个

第一：我使用内联元素，因为在 IE7 中display: inline-block只适用于自然内联的元素（虽然它不漂亮，你可以将块级元素放入其中，我决定不这样做）。我设置了小盒子的大小，在它上面设置了一个-height/2上边距，并将它定位到一半。

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

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

固定最小高度的最终小提琴（忘记IE7不支持，您也可以通过单击更改文本的长度blue）。

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

Answer 2

1) An element will automatically adjust its size to its content if you don't set width nor height it

2) Centering the box horizontally should be possible is my feeling; however you'll need some javascript to center it vertically if the height is variable. So you might as well do the positioning of the whole box using javascript.

Centering vertically with variable height is a bitch. If you insist in trying it with just css, this link is a good read.