Ich versuche, zwei Elemente mit unterschiedlichen Höhen in einem div vertikal auszurichten:

<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>

Das Twitter Div hat eine Höhe von 40px und das FB Div eine Höhe von 20px. Was gerade passiert ist, dass die fb div vertikal mit dem unteren Rand des Twitter-Bildes zentriert ist. Hier ist das 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;
}

Was mache ich falsch?