Geek asks and answers

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

I am trying to vertically align two elements with different heights in a 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>

The twitter div has a height of 40 pixels and the div fb has a height of 20 pixels. What is currently happening is the div fb, vertically centered on the bottom edge of the twitter image. Here's the 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;
}

What am I doing wrong?

+9
source share
4 answers

Put vertical alignment on inner divs

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

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

Define line-heightequal or larger than the larger icon:

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

:

💪

:

display: flex - , . , .

, :

align-items:center -

justify-content:center - ( , , )

.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>
Hide result
0

display: flex; align-items: center; display: flex; align-items: center; .footer-icons CSS .

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

More articles:


All Articles