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

Put the vertical align on the inner divs

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

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

Define a line-height equal or greater than the bigger icon:

.footer-icons {
    ...
    line-height: 32px;
}

display: flex is a pretty cool tool to have in your toolbelt. Here is some helpful documentation to get you started with it.

Specifically in your case these properties would be useful:

align-items:center - this will vertically align the centers of all child elements

justify-content:center - this will horizontally center child elements within the parent container (not sure you want this or not, but may be helpful as well)

.footer-icons {
    border: 1px solid #000;
    padding-top:40px;
    width:300px;
    margin: auto;
    
    display:flex;
    align-items:center;
    justify-content:center;
}

<div class="footer-icons">
    <div id="footer-twitter">
        Center me  
    </div>
    <div id="footer-fb">
         <img src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Facebook_logo_%28square%29.png" width="40" alt="">   
    </div>
</div>

Just add display: flex; align-items: center; in .footer-icons CSS will resolve your issue. Thanks

.footer-icons {
    padding-top:40px;
    width:300px;
    margin:auto;
    text-align:center;
    vertical-align:middle;
    display: flex;
    align-items: center;
}