居中多个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的中心,我想呢?