html - 两个 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;
} 

我已经尝试将 table-cell 应用于 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;
}

引用:centering-in-the-unknown