如何在一个div中垂直对齐两个或更多（并排）元素？ [英] How to vertically align two or more (side by side) elements in a div?

问题描述

 < div class =footer-图标> 
< div id =footer-twitter> 
< img src =images / twitter.pngwidth =40alt => 
< / div> 
< div id =footer-fb> 
< div class =fb-likedata-href =http://facebook.com/userdata-send =falsedata-layout =button_countdata-width =160 data-show-faces =falsedata-font =arial>< / div> 
< / div> 
< / div> 
  

twitter div的高度为40px，而fb div的高度为20px。目前发生的事情是，fb div垂直居中于twitter图像的底部边缘。这里是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; 
} 
  

我做错了什么？

解决方案

将垂直对齐放在内部div上

 ＃footer- twitter {
 display：inline-block; 
 vertical-align：middle; 
} 
 
＃footer-fb {
 display：inline-block; 
 vertical-align：middle; 
} 
  

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 40px, and the fb div has a height of 20px. What is currently happening is the fb div is vertically centered with 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?

解决方案

Put the vertical align on the inner divs

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

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

这篇关于如何在一个div中垂直对齐两个或更多（并排）元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！