Eu estou tentando alinhar verticalmente dois elementos com alturas diferentes em um 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>

O twitter div tem uma altura de 40px e o fb div tem uma altura de 20px. O que está acontecendo atualmente é o fb div é verticalmente centrado com a borda inferior da imagem do twitter. Aqui está o 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;
}

O que estou fazendo de errado?