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

Question

我真的被一个问题困住了。我想在 bootstrap 行 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 张图像垂直对齐。

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

这里是 CSS 垂直对齐 div。

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

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

Vertically align content in div class="row"

html

css

vertical-alignment

twitter-bootstrap