How to vertically align two or more (side by side) elements in a div?

css, html, vertical-alignment

Solution

Put the vertical align on the inner divs

#footer-twitter{
  display:inline-block;
  vertical-align:middle;
}

#footer-fb{
  display:inline-block;
  vertical-align:middle;
}

Problem

I am trying to vertically align two elements with different heights in a div: ``` <div class="footer-icons"> <div id="footer-twitter"> <img src="images/twitter.png" width="40" alt=""> </div> <div id="footer-fb"> <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"></div> </div> </div> ``` 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: ``` .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; } ``` What am I doing wrong?

Original source