Div的并排并居中

Question

我有的div一个块，我需要将它们对齐居中。

我已经成功把它们并排，但it's DINAMIC，最后一个需要为中心。

这是我CSS：

.mosaicoBox { 
width:170px; 
height:165px; 
border:1px solid #ccc; 
text-align:center; 
float:left; 
padding:0 10px; 
margin-bottom:10px; 
display:inline; 
margin-right:8px; 
} 

这是我HTML：

<center><br /><h3>Sistema TMJ</h3><br /> 
<div class="mosaicoBox mosaicoBoxOff " align="center"> 
<img src="../res/mosaico/111/th120x120_111.jpg" class="blank"> 
<div class="textMosaico"> 
<span class="orange">Apresentação do Sistema TMJ</span><br /> 
<span style="font-size:10px;"> 
<a href="http://www.youtube.com/embed/nwpPDX4RVSk?rel=0&amp;wmode=transparent&amp;autoplay=1" 
onclick="return hs.htmlExpand(this, {objectType: 'iframe', width: 480, height: 385, 
allowSizeReduction: false, wrapperClassName: 'draggable-header no-footer', 
preserveContent: false, objectLoadTime: 'after'})" 
class="highslide">assistir</a> 
| <a target="_blank" href="../res/mosaico/111/mosaico111.wmv" title="Formato WMV()">download</a> 
</span> 
</div> 
</div> 
<div class="mosaicoBox mosaicoBoxOff " align="center"> 
<img src="../res/mosaico/112/th120x120_112.jpg" class="blank"> 
<div class="textMosaico"> 
<span class="orange">Moldagem do aparelho TMD</span><br /> 
<span style="font-size:10px;"> 
<a href="http://www.youtube.com/embed/J6corp_ZNoE?rel=0&amp;wmode=transparent&amp;autoplay=1" 
onclick="return hs.htmlExpand(this, {objectType: 'iframe', width: 480, height: 385, 
allowSizeReduction: false, wrapperClassName: 'draggable-header no-footer', 
preserveContent: false, objectLoadTime: 'after'})" 
class="highslide">assistir</a> 
| <a target="_blank" href="../res/mosaico/112/mosaico112.wmv" title="Formato WMV()">download</a> 
</span> 
</div> 
</div> 
<div class="mosaicoBox mosaicoBoxOff " align="center"> 
<img src="../res/mosaico/113/th120x120_113.jpg" class="blank"> 
<div class="textMosaico"> 
<span class="orange">Opinião do Dentista</span><br /> 
<span style="font-size:10px;"> 
<a href="http://www.youtube.com/embed/bBBbCAjR7iY?rel=0&amp;wmode=transparent&amp;autoplay=1" 
onclick="return hs.htmlExpand(this, {objectType: 'iframe', width: 480, height: 385, 
allowSizeReduction: false, wrapperClassName: 'draggable-header no-footer', 
preserveContent: false, objectLoadTime: 'after'})" 
class="highslide">assistir</a> 
| <a target="_blank" href="../res/mosaico/113/mosaico113.wmv" title="Formato WMV()">download</a> 
</span> 
</div> 
</div> 
</center> 
<div class="separador"> 
</div> 

所以最后一行始终是因为浮动左：在左css。我试图PU这一切在另一个DIV与文本对齐：中心和内部的div与显示：内联这一翻译浮动：左，但炒它。这有什么解决方案？ T

hanks求助。

对不起，我的英语不好。

Answer 1

您可以使用inilne-block这个&ňtext-align:center到它的parent是这样的：

.parent{text-align:center} 

.child{ 
    width:30px; 
    height:30px; 
    display:inline-block 
} 

检查这个http://jsfiddle.net/sandeep/jXXJQ/2/

Answer 2

为这三个盒子创建一个包装，div将它们放在一起。

body {margin:0; padding:0} 
.mosaicoWrapper { 
    margin:0 auto; 
    width:600px; 
} 

和HTML代码：

<div class="mosaicoWrapper"> 
<!-- Your code --> 
<div class="separador"></div> 

这应该做的伎俩:-)

代码：http://jsfiddle.net/jXXJQ/1/