¿Cómo alinear verticalmente dos o más elementos (lado a lado) en un div?
Estoy tratando de alinear verticalmente dos elementos con diferentes alturas en un 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>
La div twitter tiene una altura de 40px, y la div fb tiene una altura de 20px. Lo que está sucediendo actualmente es que fb div está centrado verticalmente con el borde inferior de la imagen de twitter. Aquí está el 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;
}
¿Qué estoy haciendo mal?