title: Align divs horizontally to the center
body: <p>I've got this short code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#div1 div {
      margin: 0% 0,5%;
      display: inline-block;
      color: white;
      border: 1px dotted yellow;
      align: center;
  }
  #div1 {
      margin: 0px auto;
      width: 620px;
      height: 100px;
      background-color: black;
      overflow: hidden;
      text-align: center;
  }
  
  #div2, #div10 {
      width: 21px;
      height: 100px;
  }
  
  #div3, #div9 {
      width: 60px;
      height: 60px;
  }
  
  #div4, #div8 {
      width: 70px;
      height: 70px;
  }
  
  #div5, #div7 {
      width: 77px;
      height: 77px;
  }
  
  #div6 {
      width: 85px;
      height: 85px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="div1"&gt;
      &lt;div id="div2"&gt;Content2&lt;/div&gt;
      &lt;div id="div3"&gt;Content3&lt;/div&gt;
      &lt;div id="div4"&gt;Content4&lt;/div&gt;
      &lt;div id="div5"&gt;Content5&lt;/div&gt;
      &lt;div id="div6"&gt;Content6&lt;/div&gt;
      &lt;div id="div7"&gt;Content7&lt;/div&gt;
      &lt;div id="div8"&gt;Content8&lt;/div&gt;
      &lt;div id="div9"&gt;Content9&lt;/div&gt;
      &lt;div id="div10"&gt;Content10&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would like to be able to horizontally align these divs so they are not aligned to the top of my main div but to the center. 
  I tried it many different ways, such as padding, margin, but i wasn't able to figure out how to do it.</p>
  
  <p>Do you have any idea?</p>