垂直对齐列中的引导文本

Question

我有一个两列布局，左列有嵌套列。 如何将右列中的文本垂直对齐到引导程序中的中间？

我试过设置顶部：50％但没有任何反应。 我也试过使用vertical-align：middle。

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6"> <!-- Left Column-->
      <div class="row">
        <div class="col-lg-6" style="height: 350px; background-color: red;">1</div>
        <div class="col-lg-6" style="height: 350px">2</div>
        <div class="col-lg-6" style="height: 350px">3</div>
        <div class="col-lg-6" style="height: 350px; background-color: red">4</div>
      </div>
    </div>

  <div class="col-lg-6"> <!-- Right Column-->
    <div class="box-section">
      <h2 class="custom-font font-xx">THIS TEXT<br>
        Metals & O-rings</h2>
      <h4 class="custom-font font-sub">THIS TEXT</h4>
    </div>
  </div>

  </div>
</div>

干杯!

Answer 1

不确定它是否正是你所追求的。

但你可以设置高度然后垂直对齐。

    <div class="container-fluid">
  <div class="row">
    <div class="col-lg-6"> <!-- Left Column-->
      <div class="row">
        <div class="col-lg-6" style="height: 350px; background-color: red;">1</div>
        <div class="col-lg-6" style="height: 350px">2</div>
        <div class="col-lg-6" style="height: 350px">3</div>
        <div class="col-lg-6" style="height: 350px; background-color: red">4</div>
      </div>
    </div>

    <div class="col-lg-6" style="height:700px"> <!-- Right Column-->
    <div class="box-section">
      <h2 class="custom-font font-xx">THIS TEXT<br>
        Metals & O-rings</h2>
      <h4 class="custom-font font-sub">THIS TEXT</h4>
    </div>
  </div>

  </div>
</div>

然后添加这个CSS

/ *这里使用的CSS将在bootstrap.css之后应用* /

.box-section
{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

问题是它不会响应设定的高度值，但你可以在css中单独设置

http://www.bootply.com/FOsl3LiKn1

Answer 2

我认为AceWebDesign的答案是正确的，但你可以在不设置正确的列高度和盒子类类的情况下实现相同的效果：

.box-section{
margin-top:50%;
transform: translateY(-50%);
}

分叉片段： http ： //www.bootply.com/84dXtE0F2B