title: Divs side by side and centered
body: <p>I have a block of <em>divs</em> and I need to align them centered.</p>
  
  <p>I have sucessfully put them side by side, but it´s dinamic and the last one needs to be centered.</p>
  
  <p>Here is my <em>CSS</em>:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>Here is my <em>HTML</em>:</p>
  
  <pre><code>&lt;center&gt;&lt;br /&gt;&lt;h3&gt;Sistema TMJ&lt;/h3&gt;&lt;br /&gt;
  &lt;div class="mosaicoBox mosaicoBoxOff " align="center"&gt;
  &lt;img src="../res/mosaico/111/th120x120_111.jpg" class="blank"&gt;
  &lt;div class="textMosaico"&gt;
  &lt;span class="orange"&gt;Apresentação do Sistema TMJ&lt;/span&gt;&lt;br /&gt;
  &lt;span style="font-size:10px;"&gt;
  &lt;a href="http://www.youtube.com/embed/nwpPDX4RVSk?rel=0&amp;amp;wmode=transparent&amp;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"&gt;assistir&lt;/a&gt;
  | &lt;a target="_blank" href="../res/mosaico/111/mosaico111.wmv" title="Formato WMV ()"&gt;download&lt;/a&gt;
  &lt;/span&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="mosaicoBox mosaicoBoxOff " align="center"&gt;
  &lt;img src="../res/mosaico/112/th120x120_112.jpg" class="blank"&gt;
  &lt;div class="textMosaico"&gt;
  &lt;span class="orange"&gt;Moldagem do aparelho TMD&lt;/span&gt;&lt;br /&gt;
  &lt;span style="font-size:10px;"&gt;
  &lt;a href="http://www.youtube.com/embed/J6corp_ZNoE?rel=0&amp;amp;wmode=transparent&amp;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"&gt;assistir&lt;/a&gt;
  | &lt;a target="_blank" href="../res/mosaico/112/mosaico112.wmv" title="Formato WMV ()"&gt;download&lt;/a&gt;
  &lt;/span&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="mosaicoBox mosaicoBoxOff " align="center"&gt;
  &lt;img src="../res/mosaico/113/th120x120_113.jpg" class="blank"&gt;
  &lt;div class="textMosaico"&gt;
  &lt;span class="orange"&gt;Opinião do Dentista&lt;/span&gt;&lt;br /&gt;
  &lt;span style="font-size:10px;"&gt;
  &lt;a href="http://www.youtube.com/embed/bBBbCAjR7iY?rel=0&amp;amp;wmode=transparent&amp;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"&gt;assistir&lt;/a&gt;
  | &lt;a target="_blank" href="../res/mosaico/113/mosaico113.wmv" title="Formato WMV ()"&gt;download&lt;/a&gt;
  &lt;/span&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/center&gt;
  &lt;div class="separador"&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>So the last row is always on the left because of <strong>float:left</strong> in the <em>css</em>. I have tried to pu all this in another <em>div</em> with <strong>text-align:center</strong> and the inside <em>divs</em> with <strong>display:inline</strong> intead of <strong>float:left</strong>, but it scrambled it. What´s the solution for that? T</p>
  
  <p>hanks for help.</p>
  
  <p>Sorry for my bad english.</p>