html - 垂直和水平居中 Glyphicons

Question

如何在此列表中将我的 Glyphicons 垂直和水平居中(跨浏览器)？

我的 CSS 根本没有让元素居中。

它的样子:

它应该是什么样子:

<footer>
    <div class="container vertical-center">
        <ul class="list-inline center-block">
            <li class="social-icon img-circle"><a href="http://facebook.com"><i class="fa fa-facebook fa-4x"></i></a></li>
            <li class="social-icon img-circle"><a href="http://twitter.com"><i class="fa fa-twitter fa-4x"></i></a></li>
            <li class="social-icon img-circle"><a href="http://linkedin.com"><i class="fa fa-linkedin fa-4x"></i></a></li>
        </ul>
    </div>
</footer>

// CSS
footer {
    background-color: #9c2264;
    padding: 30px;
}

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

    vertical-align: middle;

    /* display: inline-block;
    vertical-align: middle;
    float: none; */
}

.social-icon {
    background-color: #fff;
    width: 75px;
    height: 75px;
}

Answer 1

圆圈使用 CSS border-radius 非常简单:

.social-icon {
    background: #fff;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    text-align: center;
    line-height: 75px;
    vertical-align: middle;
    padding-top: 10px;
}

fiddle :http://jsfiddle.net/aow3rsbd/