html - Bootstrap 垂直对齐小列不起作用

Question

我有一个引导页面，基本上是两列。一栏中有多个栏和内容，这使得它非常大，而另一栏只有一张图片。我试图让该图像垂直居中于左列。我的代码如下所示:

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

我的 small-column-align CSS 是

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

由于某些原因，右列总是顶部对齐。

Answer 1

问题是您在两个 div 上都将列宽设置为 col-sm-6，这使得两个 div 彼此 float 一个，尝试将其设置为 col-sm-5 并同时将类“small-column-align”到两个 div。

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

工作 fiddle :https://jsfiddle.net/DTcHh/12674/

希望它有用，让我知道你的想法，

狮子座。