html - 如何在div中居中动态变化的网格？

Question

我需要创建一个居中的正方形网格，其中包含文本。使用 jQuery 帮助用户将能够添加或删除正方形(在行和列中)。

基本上代码是:

<style>
div.square{
    padding: 5px;
    margin: 5px;
    border: 1px solid green;
    /*display: inline-table; /* IE fail*/
    /*display: inline-block; /* IE fail*/
    float: left;
}
div.row{
    margin: 0 auto;
}
</style>

<div style="width:500px; border:1px solid red; margin: 0 auto">
    <div class="row">
        <div class="square">1</div>
        <div class="square">2</div>
        <div class="square">3</div>
    </div>
    <div style="clear:both"></div>
    <div class="row">
        <div class="square">1</div>
        <div class="square">2</div>
        <div class="square">3</div>
    </div>
    <div style="clear:both"></div>
    <div class="row">
        <div class="square">1</div>
        <div class="square">2</div>
        <div class="square">3</div>
    </div>
    <div style="clear:both"></div>
</div>

最好的方法是什么？

Answer 1

你在找这样的东西吗:

http://jsbin.com/etunuk/1/

1. float 元素收缩包装，因此它们需要附加宽度。
2. 要使 float 元素居中，您需要添加它们的宽度 + 内边距 + 边距 + 边框并将该宽度分配给包装器，在本例中为 .row 和中心 .row。

如果去掉边框，需要去掉宽度，行宽1px * 6等。