Vertical allign using bootstrap not working

Question

I'm using Bootstrap v3.2.0 and i have an html structure like this:

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

i tried to make the content inside header-seller-profile class align to bottom but it's not working at all, it keeps stick to the top. here's my css code:

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

Are the intended targeted elements displayed as `inline-block` and are there any floats declared on these elements? — UncaughtTypeError, Sep 07 '17 at 09:42
`vertical-align` not worked without `display:inline-block or table` — Minal Chauhan, Sep 07 '17 at 09:45
@MinalChauhan i already using inline-block and table, but not working — Shell Suite, Sep 07 '17 at 09:49
@UncaughtTypeError see my updated question, i'm using inline-block still not working — Shell Suite, Sep 07 '17 at 09:49
@ShellSuite and are there any `float`s declared on these elements? — UncaughtTypeError, Sep 07 '17 at 09:53
@ShellSuite Try applying those styles to the nested elements within `div[class*="header-content"]` and make sure these nested elements are displayed `inline-block` with no `float` applied. — UncaughtTypeError, Sep 07 '17 at 10:01

score 1 · Accepted Answer · answered Sep 07 '17 at 09:53

1

Are you looking for this ?

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

answered Sep 07 '17 at 09:53

Swapna

843
3
10
22

thanks it works, but is there a reason why vertical-align not working? – Shell Suite Sep 07 '17 at 10:00
We can't use vertical-align to block level element , only applicable to inline and table cell elements . Details here https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align – Swapna Sep 07 '17 at 10:02
@Swarpna but when i chang the font-size inside span to 2em, its not aligned to bottom precisely – Shell Suite Sep 07 '17 at 10:28
Changed it here. https://codepen.io/swapnaranjitanayak/pen/Evzzvj It's working. Could you please check it again ? – Swapna Sep 07 '17 at 10:44

score 0 · Answer 2 · answered Sep 07 '17 at 09:46

0

Replace your css

From :

vertical-align: bottom;

To

vertical-align: text-bottom;

answered Sep 07 '17 at 09:46

not working at all – Shell Suite Sep 07 '17 at 09:51

Vertical allign using bootstrap not working

2 Answers2