居中多个div在另一个div？
我有另一个div中包含四个div，我想要四个内部div中心。
我已经使用了float: left在四个div上保持水平alignment。
CSS：
<style> .square //inner divs { float: left; margin:1pt; width:72pt; height:72pt; } .container //outer divs { text-align:center; width:450pt; height: 80pt; } </style>
和HTML：
<div class = "container"> <div class = "square">...</div> <div class = "square">...</div> <div class = "square">...</div> <div class = "square">...</div> </div>
我怎样才能将div放在容器中？
内部div的数量可以变化。
如果你可以使用额外的div，这里有一个替代方法：
<div class = "container"> <div class="centerwrapper"> <div class = "square">...</div> <div class = "square">...</div> <div class = "square">...</div> <div class = "square">...</div> </div> </div> <style> .square { float: left; margin:1pt; width:72pt; height:72pt; } .container { text-align:center; width:450pt; height: 80pt; } .centerwrapper { margin: auto; width: 302pt; } </style>
此外，请确保您在<div class = "container">有closures引号。 你粘贴的代码是缺less一个。
因为你不知道你有多lessdiv，你应该使用
text-align:center在外部div的text-align:center
display:inline-block在内部div的display:inline-block
http://jsfiddle.net/edi9999/yv2WY/
HTML
<div class = "container"> <div class = "square">John</div> <div class = "square">Mary</div> <div class = "square">Doe</div> <div class = "square">Jane</div> </div>
CSS
.square { margin:1px; width:20%; text-align:left; border: 1px solid gray; display:inline-block; } .container { text-align:center; width:100%; height: 80pt; border: 1px solid black; }
而不是浮动.square divs，给他们display: inline-block. 这可能是Firefox 3.0.x中的一个诡计，但是我相信3.5.x中完全支持内嵌块。
正如#RwL所说，使用<span>起作用，这里是一个示例代码，在IE6 / 8，Chrome，Safari，Firefox上testing：
CSS
<style type="text/css"> /* borders and width are optional, just added to improve visualization */ .parent { text-align:center; display: block; border: 1px solid red; } .child { display: inline-block; border: 1px solid black; width: 100px; } </style>
HTML
<span class="parent"> <span class="child"> A </span> <span class="child"> B </span> </span>
我可以find最好的解决scheme，当你有一个dynamic的数字中心是使用text-align: center; 在父div上，并display: inline-block; 对孩子。
这里详细解释。
只需将margin:auto; 对于你的主包装内的所有后续的div text-align:center; 。 应该把所有的小孩div都放在父div的中心，我想呢？
