Div的並排並居中

我有的div一個塊，我需要將它們對齊居中。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求助。

對不起，我的英語不好。

來源

2011-10-27 dipi evil

您可以使用inilne-block這個&ňtext-align:center到它的parent是這樣的：

.parent{text-align:center} 

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

檢查這個http://jsfiddle.net/sandeep/jXXJQ/2/

來源

2011-10-27 13:07:27 sandeep

明白了！但**內聯表**更好，因爲**內聯塊**正在對齊divs，我需要這種調整。 –

但內聯塊更好，因爲它在IE瀏覽器中工作與CSS黑客＆前面的例子有一個問題與標記不與CSS檢查此http://jsfiddle.net/MKpxy/ – sandeep

爲這三個盒子創建一個包裝，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/

來源

2011-10-27 12:47:28 embe

不能由600px的修復，因爲it's DINAMIC：這是4周的cols現在，但它只能有一個，兩個或三個div的。並與**浮動：左*的div一定不會對準中心... –

並不完美，但可能會有所幫助： '.mosaicoWrapper { 的位置是：絕對的; float：left; 剩餘：25％; 寬度：自動; }' – embe

Div的並排並居中

回答

相關問題