html - 垂直对齐 div 类 ="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 看看您是否可以将其用作您的代码的起点。

正如您在下面看到的，行中有 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 -->