Вертикальное выравнивание двух столбцов md с Bootstrap

Question

Я искал и пробовал все решения Stackoverflow без успеха.

Я этот код, и я использую bootstrap3

<footer> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-4"> 
       <a href="#" target="_blank"><img src="Images/social/facebook.png" alt="facebook" class="footerimg" /></a> 
       <a href="#" target="_blank"><img src="Images/social/twitter.png" alt="twitter" class="footerimg" /></a> 
       <a href="#" target="_blank"><img src="Images/social/youtube.png" alt="youtube" class="footerimg" /></a> 
      </div> 
      <div class="col-md-4 col-md-offset-4"> 
       <p class="text-right">&copy; <%: DateTime.Now.Year %> Test - All Rights Reserved</p><p class="text-right">P.IVA 123456789</p> 
      </div> 
     </div> 
    </div> 
</footer> 

Я хотел бы вертикально центр col-md-4 элементов и у меня есть стили колонтитула, как это:

footer { 
    background-color: #000; 
    color: #fff; 
    height: 120px; 
} 

Я уже пробовал с табличной ячейкой, примененной к col-md-4, но без успеха.

Можете ли вы предложить решение?

Answer 1

Если вы хотите что-то вроде этого: (изображения не показаны)

Я сделал live example.

Это код:

<footer> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-4 col-sm-4"> 
       <div class="centered"> 
        <a href="#" target="_blank"><img src="Images/social/facebook.png" alt="facebook" class="footerimg" /></a> 
        <a href="#" target="_blank"><img src="Images/social/twitter.png" alt="twitter" class="footerimg" /></a> 
        <a href="#" target="_blank"><img src="Images/social/youtube.png" alt="youtube" class="footerimg" /></a> 
       </div> 
      </div> 
      <div class="col-md-4 col-sm-4 col-sm-offset-4 col-md-offset-4"> 
       <div class="centered"> 
        <p class="text-right">&copy; Test - All Rights Reserved</p><p class="text-right">P.IVA 123456789</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</footer> 

И CSS

footer { 
    background-color: #000; 
    color: #fff; 
    height: 120px; 
    display: table; 
    width: 100%; 
} 

.centered { 
    display: table-cell; 
    vertical-align: middle; 
    height: 120px; 
} 

Ref: centering-in-the-unknown