title: centre a group of floated divs
body: <p>I'm trying to centre a group of floated divs. </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="parent"&gt;
          &lt;div class="child"&gt;&lt;/div&gt;
          &lt;div class="child"&gt;&lt;/div&gt;
          &lt;div class="child"&gt;&lt;/div&gt;
      &lt;div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.Parent {
      float: left;
      background: #ccc;
  
      margin: 0 0 16px 0;
      clear: both
  }
  .Child {
      float: left;
      width: 150px;
      height: 50px;
  }
  </code></pre>
  
  <p>jsfiddle <a href="http://jsfiddle.net/TDq7T/" rel="nofollow">http://jsfiddle.net/TDq7T/</a></p>
  
  <p>How would I get it so that the child elements are centred? I'm really stuck</p>