title: Align Vertically my div
body: <p>Why my div <code>&lt;div class="two"&gt;</code> didint align verticaly at the middle event after i put <code>vertical-align: middle;</code> </p>
  
  <p>Here's a <a href="http://jsfiddle.net/Hz4zz/" rel="nofollow">FIDDLE</a></p>
  
  <p>HTML :</p>
  
  <pre><code>&lt;div class="main"&gt;
      &lt;div class="one"&gt;&lt;/div&gt;
      &lt;div class="two"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS :</p>
  
  <pre><code>.main {
      border: 1px solid;
      display: inline-block;  
  }
  
  .one {
      width: 70px;
      height: 70px;
      background-color: antiquewhite;
      display: inline-block;
  }
  
  .two {
      display: inline-block;
      width: 10px;
      height: 10px;
      background-color: cadetblue;
      vertical-align: middle;    
  }
  </code></pre>