Vertically align content in div class="row"

Question

I am really stuck on one problem. I want to vertically align content (each element should be vertically centered) in a bootstrap row div (id="v-align"). I have tried different methods to solve this, however I have not come to a solution yet. Here is my code:

<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, Hi there. I re did this from scratch as you had lots of nested cols that may not have been needed.

Have a look at this Fiddle to see if you can use this as a starting point for your code.

As you can see below, there are 3 images vertically aligned in a row.

What I do here is center a div and then place the image in the div.

Here is the CSS that aligns the div vertically.

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