Question

我正在使用Bootstrap v3.2.0，我有一个像这样的html结构：

<div class="header-seller-profile col-md-12">
  <div class="left-header-content col-md-5">
    <div class="seller-banner">
      <img src="http://bouquet.developers-server.com/pub/media/avatar/banner-image.png" alt="no image">
    </div>
  </div>
  <div class="middle-header-content col-md-4">
    <div class="seller-address">
      <div class="wefrom">
        <a class="cont-name" title="Search" href="http://bouquet.developers-server.com/marketplace/seller/location/shop/dasdasdad?loc=sadasdasd" target="_blank">
          <span>sadasdasd</span>
          <img class="piccountry" title="View Map" src="http://bouquet.developers-server.com/pub/static/version1504776489/frontend/Mgs/organie/en_US/Webkul_Marketplace/images/country/countryflags/ID.png">
        </a>
      </div>
    </div>
  </div>
  <div class="right-header-content col-md-3">
    <div class="seller-social-media">
      <div class="wk-mp-profile-container storename wk-mp-display-block-css">
        <a href="//facebook.com/sadasda" target="blank">
          <span class="wk-social-icon wk-icon wk-social-icon-fb" title="Check in Facebook"></span>
        </a>
       <a href="//twitter.com/dasdsadas" target="blank">
         <span class="wk-social-icon wk-icon wk-social-icon-tw" title="Check in Twitter"></span>
        </a>
     </div>
    </div>
  </div>
</div>

我试图将header-seller-profile类中的内容对齐到底部，但它根本不起作用，它始终坚持到顶部。这是我的css代码：

.header-seller-profile{
  background-color: #333333;
  color: #fff;
  display: inline-block;
}
.middle-header-content,right-header-content,left-header-content{
    vertical-align: bottom;
}
.seller-banner img{
   width: 100%;
}

Answer 1

你在找这个吗？

https://codepen.io/swapnaranjitanayak/pen/GvaLNJ

CSS：

.header-seller-profile{
    background-color: #333333;
    color: #fff;
     display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: flex-end;
}

.header-seller-profile img{
  vertical-align:bottom;
}

Answer 2

替换你的css

来自：

vertical-align: bottom;

要

vertical-align: text-bottom;

垂直联盟使用bootstrap无法正常工作

2 个答案: