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