Как выровнять по вертикали два или более (рядом) элемента в div?
Я пытаюсь вертикально выровнять два элемента с разной высотой в 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>
Div твиттера имеет высоту 40px, а div fb имеет высоту 20px. То, что в настоящее время происходит, это то, что div fb вертикально центрирован по нижнему краю изображения в твиттере. Вот 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;
}
Что я делаю неправильно?