如何使用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 

感谢。

- randomuser1

---

ul元素的文本居中对齐。 li元素以行内块状(display: inline-block)显示。 - Matej Đaković

是的，完全正确！我不知道如何根据您的评论关闭此问题，所以如果您将其发布为答案，我将接受并关闭它，谢谢！ - randomuser1

可能是将<ul><li>居中到div的重复问题。 - Rob

@MatejĐaković，干得好！发表一个答案吧！ - AmmarCSE

由于这个问题在谷歌搜索结果中排名第一，针对那些想要居中包括项目符号的列表的人，我想提一下可以使用 ul {text-align: center; list-style-position: inside;} 来实现。 - Adam Reis

Answer 1

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

只需添加

ul {
text-align: center;
}

li {
display: inline-block;
}

祝你好运！;)

- Matej Đaković

Answer 2

几天前有一个类似的问题：

如何使我的 <.li> 在导航栏中居中

你只需要将text-align: center添加到ul元素中，就像这样：

.footer-nav{
    text-align: center;
}

.footer-nav li {
    list-style: none;
    padding: 5px;
    display: inline-block;
}

- Tiziano Mischi

Answer 3

你应该尝试将 li {float:left;} 替换为 li {display: inline-block;}，并将其父元素 ul {text-align: center;}。

- thelightings

Answer 4

将以下代码添加到 ul 的 CSS 样式中。

section.video ul {
    margin-top: 30px;
    list-style-type:none;
    display:flex;
    justify-content: center;    
}

请查看 jsFiddle http://jsfiddle.net/tfLz08vd/83/

- eQ19