垂直对齐 div class="row" 中的内容

Question

我真的被一个问题困住了。我想在引导行 div（id="v-align"）中垂直对齐内容（每个元素应该垂直居中）。我尝试了不同的方法来解决这个问题，但是我还没有找到解决方案。这是我的代码：

<div class="slide" data-anchor="slide1">
    <div class="row">
        <div class="menu_top"></div>
    </div>

    <div class="row" id="v-align">
        <div class="col-md-3">
            <div class="col-sm-10">
                <img src="./public/images/crm.png" class="img-responsive">
            </div>
        </div>
        <div class="col-md-6 text-center">
            <img src="./public/images/photo1.jpg" class="img-responsive image">
        </div>
        <div class="col-md-3">
            <div class="col-sm-10">
                <img src="./public/images/crm.png" class="img-responsive">
           </div>
        </div>
    </div>

    <div class="row">   
        <div class="col-md-12 text-center">
            <h2>Some text here</h2>     
        </div>
    </div>
</div>

<style>
    .image {
       max-height: 500px;
       margin: 0 auto;
    }
</style>

JSFiddle Example

Answer 1

Matus Kozuch，您好。我从头开始这样做，因为您有很多可能不需要的嵌套列。

查看此Fiddle，看看您是否可以将其用作代码的起点。

如下所示，row 中有 3 张图像垂直对齐。

我在这里所做的是将div 居中，然后将图像放在div 中。

这是垂直对齐 div 的 CSS。

.center {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;  
}

<div class="container-fluid">

    <div class="row">
        <div class="col-lg-12">
        </div>
    </div>

    <div class="row row-clr">
        <div class="col-xs-3 col-xs-offset-0 col-sm-2 col-sm-offset-2 block">
            <div class="block2 bg-image center">
        </div>
        </div>

        <div class="col-xs-3 col-xs-offset-1 col-sm-2 col-sm-offset-1 block">
            <div class="block2 bg-image center">
            </div>    
        </div>

        <div class="col-xs-3 col-xs-offset-1 col-sm-2 col-sm-offset-1 block">
            <div class="block2 bg-image center">
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 text-center">
            <h2>Some text here</h2>     
        </div>
    </div>

</div><!-- /.container -->