Bootstrap垂直对齐小列不起作用

Question

I have a bootstrap page that is basically two columns. One column has several columns and content in it which makes it very large and the other has just an image. I am trying to get that image vertically centered to the left column. My code looks like this:

<div class="row">
  <div class="col-sm-6 features">
    <div class="col-sm-12">
      This column has a lot of content and gets to be about 700px
    </div>
  </div>
  <div class="col-sm-6 small-column-align">
    <img src="inc/img/robot-warrior.jpg" width="717" height="837" alt="" style="max-width:80%; height:auto;"/>
  </div>
</div>

And my CSS for small-column-align is

.small-column-align{
    display: inline-block;
    vertical-align: middle;
    float: none;
}

For some reason the right column is always top aligned though.

Answer 1

The problem is that you are setting the column width to col-sm-6 on both div's, and that makes the two divs float one below each other, try to put it col-sm-5 on both and also put the class "small-column-align" to both div's.

HTML:

<div class="row">
<div class="col-sm-5 small-column-align">
    <p>This is a text content for sm 5</p>
    <p>This is a text content for sm 5</p>
    <p>This is a text content for sm 5</p>
    <p>This is a text content for sm 5</p>
    <img src="http://labs.sogeti.com/wp-content/uploads/2015/03/google-car.jpg" width="717" height="837" alt="" style="max-width:80%; height:auto;"/>


    <p>This is a text content for sm 5</p>
    <p>This is a text content for sm 5</p>
    <p>This is a text content for sm 5</p>
    <p>This is a text content for sm 5</p>
</div>
<div class="col-sm-5 small-column-align">


    <p>This is a text content for sm 5</p>
    <p>This is a text content for sm 5</p>
    <img src="http://labs.sogeti.com/wp-content/uploads/2015/03/google-car.jpg" width="717" height="837" alt="" style="max-width:80%; height:auto;"/>
    <p>This is a text content for sm 5</p>
    <p>This is a text content for sm 5</p>
</div>

CSS:

.small-column-align {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

Working fiddle: https://jsfiddle.net/DTcHh/12674/

Hope it works, let me know your thoughts,

Leo.

Answer 2

Can you try this?

 .features-wrap { display: flex; align-items: center; } .features-wrap > div { float: none; display: inline-block; } .features { flex: 1; } .small-column-align { width: 10%; position: relative; } 

 <div class="row features-wrap"> <div class="col-sm-6 features"> <div class="col-sm-12"> This column has a lot of content and gets to be about 700px </div> </div> <div class="col-sm-6 small-column-align"> <img src="inc/img/robot-warrior.jpg" width="717" height="837" alt="" style="max-width:80%; height:auto;"/> </div> </div>