title: How to vertically align two or more (side by side) elements in a div?
body: <p>I am trying to vertically align two elements with different heights in a div:</p>
  
  <pre><code>&lt;div class="footer-icons"&gt;
      &lt;div id="footer-twitter"&gt;
           &lt;img src="images/twitter.png" width="40" alt=""&gt;    
      &lt;/div&gt;
      &lt;div id="footer-fb"&gt;
           &lt;div class="fb-like" data-href="http://facebook.com/user" data-send="false" data-layout="button_count" data-width="160" data-show-faces="false" data-font="arial"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The twitter div has a height of 40px, and the fb div has a height of 20px. What is currently happening is the fb div is vertically centered with the bottom edge of the twitter image. Here's the CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.footer-icons {
      padding-top:40px;
      width:300px;
      margin:auto;
      text-align:center;
      vertical-align:middle;
  }
  
  #footer-twitter {
      display:inline-block;
  }
  
  #footer-fb {
      display:inline-block;
  }
  </code></pre>
  
  <p>What am I doing wrong?</p>