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

forked snippet：http://www.bootply.com/84dXtE0F2B

垂直对齐列中的引导文本

2 个答案: