Question

我有一块 divs ，我需要将它们对齐居中。

我已成功地将它们并排放置，但它是恐龙，最后一个需要居中。

这是我的 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 中的 float：left ，所以最后一行总是在左边。我试图在 text-align：center 的另一个 div 中使用 display：inline div strong> intend of float：left ，但它加扰了它。解决方案是什么？ Ť

寻求帮助。

抱歉我的英语不好。

Answer 1

为这三个框创建一个包装器，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/

Answer 2

您可以inilne-block使用text-align:center对此parent .parent{text-align:center} .child{ width:30px; height:30px; display:inline-block }这样：{/ p>

{{1}}

检查此http://jsfiddle.net/sandeep/jXXJQ/2/

分开并排居中

2 个答案: