Question

我正在尝试为Bootstrap中的第一页创建一个页脚，它看起来很好，除了内容应该垂直居中。检查Chrome中的元素后，看起来实际的容器元素大约是父页脚元素高度的50％。

现在我可以通过设置“line-height”以匹配页脚的“height”属性来部分解决这个问题，但是这样做会导致部分内容显示在页脚下方。我做错了什么，如何解决这个问题？

没有Line-Height：

使用Line-Height：

<!-- Site footer -->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <p>
                <a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Contact</a>
                <br />
                © Website 2016. All rights reserved.
                </p>
            </div>
            <div class="col-sm-6">
                <p class="muted pull-right">
                    <a href="https://www.facebook.com"><i id="social-fb" class="fa fa-facebook-square fa-2x social"></i></a>
                    <a href="https://twitter.com"><i id="social-tw" class="fa fa-twitter-square fa-2x social"></i></a>
                    <a href="https://plus.google.com"><i id="social-gp" class="fa fa-google-plus-square fa-2x social"></i></a>
                    <a href="mailto:website@gmail.com"><i id="social-em" class="fa fa-envelope-square fa-2x social"></i></a>
                </p>
            </div>
        </div>
    </div>
</footer>

CSS

footer
{
    height: 100px;
    background:#fff;
    margin-top:20px;
    line-height: 100px;
}

Answer 1

您可以使用display:flex + align-items:center来实现这一目标。

footer
{
    height: 100px;
    background:#fff;
    margin-top:20px;
    display:flex;
    align-items:center;
}

jsfiddle

Answer 2

您可以使用表格属性进行垂直对齐。

HTML：

<!-- Site footer -->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <p>
                <a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Contact</a>
                <br />
                © Website 2016. All rights reserved.
                </p>
            </div>
            <div class="col-sm-6">
                <p class="muted pull-right">
                    <a href="https://www.facebook.com"><i id="social-fb" class="fa fa-facebook-square fa-2x social"></i></a>
                    <a href="https://twitter.com"><i id="social-tw" class="fa fa-twitter-square fa-2x social"></i></a>
                    <a href="https://plus.google.com"><i id="social-gp" class="fa fa-google-plus-square fa-2x social"></i></a>
                    <a href="mailto:website@gmail.com"><i id="social-em" class="fa fa-envelope-square fa-2x social"></i></a>
                </p>
            </div>
        </div>
    </div>
</footer>

CSS：

footer {
    background:#fff;
    margin-top:20px;
}

footer p {
    margin: 0;
}

footer .container .row {
    display: table;
    width: 100%;
    height: 100px;
}

footer .container .row > div {
    display: table-cell;
    vertical-align: middle;
    float: none;
}

工作示例：https://jsfiddle.net/62shy0ob/1

Answer 3

尝试添加padding-top和padding-bottom而不是line-height：

footer
{
    height: 100px;
    background:#fff;
    padding: 2% 0;

}

底部的Bootstrap垂直中心容器

3 个答案: