0

I have a block of divs and I need to align them centered.

I have sucessfully put them side by side, but it´s dinamic and the last one needs to be centered.

Here is my 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;
}

Here is my 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>

So the last row is always on the left because of float:left in the css. I have tried to pu all this in another div with text-align:center and the inside divs with display:inline intead of float:left, but it scrambled it. What´s the solution for that? T

hanks for help.

Sorry for my bad english.

Doozer Blake
  • 7,677
  • 2
  • 29
  • 40
dipi evil
  • 489
  • 1
  • 11
  • 20

2 Answers2

1

Create a wrapper for these three boxes, div which will hold them together.

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

and in html your code:

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

That should do the trick :-)

Code: http://jsfiddle.net/jXXJQ/1/

embe
  • 11
  • 2
  • Can't fix by 600px because it´s dinamic: it's 4 cols by now, but it can be only one, two or three divs. And with the **float:left* the DIVs will never align to center... – dipi evil Oct 27 '11 at 13:03
  • Not perfect but might be helpful: `.mosaicoWrapper { position:absolute; float:left; left:25%; width:auto; }` – embe Oct 27 '11 at 13:38
1

you can use inilne-block for this &n text-align:center to it's parent like this:

.parent{text-align:center}

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

check this http://jsfiddle.net/sandeep/jXXJQ/2/

sandeep
  • 91,313
  • 23
  • 137
  • 155
  • Got it!!! But **inline-table** was better because **inline-block** was aligning divs down and I needed this to be aligned up. – dipi evil Oct 27 '11 at 15:18
  • but inline-block is better because it's work in IE with css hack & for previous example there is an problem with markup not with css check this http://jsfiddle.net/MKpxy/ – sandeep Oct 27 '11 at 15:30