Question

我知道有很多方法可以在HTML / CSS中的流体宽度页面上将未知宽度的内容居中，但由于某种原因我无法让它们在这种情况下工作并需要帮助。

首先，我要说明我需要一个适用于常见浏览器和IE6的解决方案（不要问为什么）。

这是标记和问题的一个例子。在这个例子中，我希望黄色框在蓝色框内居中。

<div style="background:blue;margin:0 auto;width:100%;">
    <table style="margin:0 auto;">
        <tr>
            <td>
                <div style="background:yellow;float:left;padding:50px;">Test</div>
                <div style="background:yellow;float:left;padding:50px;">Test</div>
                <div style="background:yellow;float:left;padding:50px;">Test</div>
                <div style="background:yellow;float:left;padding:50px;">Test</div>
                <div style="background:yellow;float:left;padding:50px;">Test</div>
                <div style="background:yellow;float:left;padding:50px;">Test</div>
            <td>
        </tr>
    </table>
</div>

我使用表格尝试了此方法，但我也尝试了-50％+ 50％的方法。我很高兴使用适用于所有常见浏览器和IE6的任何方法。

有人可以帮我解决。

请不要在IE6上讲课或不正确使用TABLE标签。

Answer 1

试试这个，

<tr>
    <td>
        <div style="width: 379px;">
            <div style="background:yellow;float:left;padding:50px;">Test</div>
            <div style="background:yellow;float:left;padding:50px;">Test</div>
            <div style="background:yellow;float:left;padding:50px;">Test</div>
            <div style="background:yellow;float:left;padding:50px;">Test</div>
            <div style="background:yellow;float:left;padding:50px;">Test</div>
            <div style="background:yellow;float:left;padding:50px;">Test</div>
        </div>
    </td>
</tr>

Answer 2

我从你的要求中理解你想让你的div成为中心？那么请看下面的代码

<style type="text/css">

.yourclass
{
    background:yellow;
    float:left;
    padding:50px;
}
.blueback
{
    background:blue;    
}
.mytable
{
    width: auto;
    margin-left: auto;
    margin-right: auto;       
}
div.clear
{
   clear:both;
}
</style>

<div class="blueback">
<table class="mytable">
    <tr>
        <td>
            <div class="yourclass">Test</div>
            <div class="yourclass">Test</div>
            <div class="yourclass">Test</div>
            <div class="clear"></div>
            <div class="yourclass">Test</div>
            <div class="yourclass">Test</div>
            <div class="yourclass">Test</div>
        </td>
    </tr>
</table>

希望它有所帮助...

Answer 3

经过大量研究后，我发现没有适用于所有浏览器的解决方案，并且不需要IE6黑客攻击。

最佳解决方案是显示：内联块和IE6 / 7以及各种其他黑客（例如FF2）。

取自here的最终解决方案如下：

<style>
    li {
        width: 200px;
        min-height: 250px;
        border: 1px solid #000;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: top;
        margin: 5px;
        zoom: 1;
        *display: inline;
        _height: 250px;
    }
</style>

<li>
        <div>
            <h4>This is awesome</h4>
            <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg"
            alt="lobster" width="75" height="75"/>
        </div>
</li>

如何将未知宽度的容器和浮动元素置于流体页面中心

3 个答案: