css - 如何在没有 Javascript 的情况下居中包裹 float

Question

我有这个 html 配置:

<div id="Header">
    <div id="Stamp">
        <img alt="Header Stamp" src="images/About-Us.png" />
    </div>
    <div id="Events">
        <div></div>
    </div>
    <div class="clear"></div>
</div>

并应用了以下 CSS:

#Stamp, #Events{
    width:50%;
    float:left;
    min-width:400px;
}

#Stamp img{
    display:block;
    margin: 0 auto;
}

#Events > div{
    border:1px solid pink; /* Debug just to see where it is */
    height:300px;
    width:400px;
    margin: 25px auto;
}

所以有一个宽度为 100% 的标题 div，其中包含 2 个同样宽度为 50% 的子 div，它们都向左浮动。

里面的元素居中；

因此，当浏览器调整大小时，#stamp 和#events 显然会调整大小，因为它们是百分比，并且它们的内容居中。

它们都有最小宽度，所以当浏览器窗口太小时，它们会换行。

当他们包裹......他们;正如预期的那样；都 float 到父容器的左边

我的问题是:

当花车包裹起来时。有什么办法可以让他们居中吗？而不是向左浮动？

我正在寻找一种没有 javascript 的方法。

如果不可能，那么我想我不得不使用 javascript。

那么有没有办法测试float是否已经包裹了呢？

鼓励任何其他解决方案:)

谢谢

亚历克斯

Answer 1

您可以使用 display:inline-block 来实现此类功能。所以，你必须这样写:

#Stamp, #Events{
    width:50%;
    display:inline-block;
    *display:inline;/* for IE*/
    *zoom:1;/*for IE*/
    min-width:400px;
    text-align:left;
}
#Header{
 text-align:center
}

检查这个http://jsfiddle.net/7pSyB/