垂直和水平居中的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;
}

小提琴：http://jsfiddle.net/aow3rsbd/