html - 如何在 css 中将我的 ul li 列表居中？

Question

我有以下 html 代码:

<section class="video">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 text-center">

                        <ul class="footer-nav">
                            <li><a href="#">Contact</a></li>
                            <li><a href="#">Press</a></li>
                            <li><a href="#">Careers</a></li>
                            <li><a href="#">Business</a></li>
                            <li><a href="#">Careers</a></li>
                            <li><a href="#">Business</a></li>
                        </ul>

                    </div>
                </div>
            </div>
        </section>

并包含我的 CSS(在 jsfiddle 中)我得到的结果是文本向左对齐......我怎样才能将所有内容居中，所以结果是:

                  Contact  Press  Careers  Business  Careers  Bussiness 

? 谢谢。

Answer 1

http://jsfiddle.net/tfLz08vd/2/

只需添加

ul {
text-align: center;
}

li {
display: inline-block;
}

祝你好运! ;)