如何在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. 浮动元素收缩包装，所以他们需要连接的宽度。
2. 要使浮动元素居中，您需要添加宽度+填充+边距+边框，并将该宽度分配给包装，在本例中为.row和center .row。

如果删除边框，则需要从行宽等中删除宽度，1px * 6。