Вертикально выровнять содержимое в div-классе = "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

Матус Kozuch, Привет. Я сделал это с нуля, поскольку у вас было много вложенных cols, которые, возможно, не были необходимы.

Посмотрите на это Fiddle, чтобы узнать, можете ли вы использовать это как отправную точку для своего кода.

Как вы можете видеть ниже, есть 3 изображения, выровненных по вертикали в row.

Что я здесь делаю центр 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 -->