Divs并排并居中

Question

我有一个div块，我需要对齐他们的中心。

我成功地把他们并排放在一起，但这是迪尼奥姆，最后一个需要中心位置。

这是我的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中的浮动:左。我尝试在另一个div中使用text-align:center和内部div中的display:inline整数float:left，但是它对其进行了置乱。那有什么解决办法？T

汉克斯寻求帮助。

对不起我的英语不好。

Answer 1

您可以使用inilne-block &n 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/