divsを並べて中心に合わせる

Question

私はブロックdivsを持っています。それらを中心に揃える必要があります。

私はそれらを並んで並べていますが、それはダイナミックで最後のものは中央に配置する必要があります。

.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がある中を残しましたcss。 フロートのインライン intead：を残したが、それはそれをスクランブル表示で中央と内部のdiv：私はテキスト整列を持つ別ののdivにPUにこのすべてを試してみました。その解決策は何ですか？ T

ハンクスです。

私の悪い英語のために申し訳ありません。

Answer 1

をあなたはそれにこの& N text-align:centerためinilne-blockを使用することができますparentは次のとおりです。

.parent{text-align:center} 

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

チェックこのhttp://jsfiddle.net/sandeep/jXXJQ/2/

Answer 2

これら3つのボックス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/