title: Display div as centered blocks without 100% width
body: <p>I know it's a super-basic question, but I'm not able to find a solution. I have 2 div and I would like to display them as blocks (one below the other) without having 100% width. Here's my code.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div class="test"&gt;one&lt;/div&gt;
      &lt;div class="test"&gt;two&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.test {
      display:inline-block;
      clear: both;
      border:1px solid;
  }
  
  #container {
      clear:both;
      text-align:center;
  }
  </code></pre>
  
  <p>Unfortunately this <a href="https://stackoverflow.com/questions/12708381/display-block-without-100-width">answer</a> doesn't fit to me, since I need to center blocks horizontally (so float cannot be applied in my case). Here's the <a href="http://jsfiddle.net/b8LuQ/1/" rel="nofollow noreferrer">fiddle</a>. Thanks in advance.</p>