html - 文本在粘性 BootStrap 页脚中垂直居中

Question

我对 BS 页脚的垂直居中有很大的问题。我的代码如下:

<footer class="footer navbar-fixed-bottom" style="background-color:lightgrey;">
<div class="container">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                <ul class="nav nav-pills nav-justified">
                <li><a href="#">SITE1</a></li>
                <li><a href="#">SITE2</a></li>
                </ul>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center">
                <div class="center-inner">
                <p class="text-muted inner">Some text.</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center">
                <p>More text.</p>
            </div>  
        </div>
    </div>
</div>

JSFiddle

不幸的是，第 2 和第 3 列中的文本未垂直居中。我尝试了类似主题的解决方案，但遗憾的是 - 在粘性页脚中没有很好的效果(在大多数情况下 - 它改变了页脚高度和布局 - 在添加显示:表格之后)。

我在下面上传了图片，展示了它今天的样子，以及我希望它的样子:

有人可以帮我解决这个问题。

Answer 1

你可以使用这个:

.center-vertical{
  display: flex;
  align-items: center;
}

(只适用于父框)

https://jsfiddle.net/kaskull/z4wLpk9h/5/