Html 如何在 css 中居中我的 ul li 列表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30829916/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I center my ul li list in css?
提问by randomuser1
I have the following html code:
我有以下 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>
and with my CSS included (in the jsfiddle) I get the result that the text is aligned to the left... How can I center everything, so the result says:
并且包含我的 CSS（在jsfiddle 中）我得到的结果是文本向左对齐......我如何将所有内容居中，所以结果说：
Contact Press Careers Business Careers Bussiness
? Thanks.
? 谢谢。
回答by Matej ?akovi?
http://jsfiddle.net/tfLz08vd/2/
http://jsfiddle.net/tfLz08vd/2/
just add
只需添加
ul {
text-align: center;
}
li {
display: inline-block;
}
Good luck! ;)
祝你好运！;)
回答by Tiziano Mischi
Similar question added few time ago How do I get my <.li> centered in my nav
不久前添加了类似的问题 How do I get my <.li> center in my nav
You simply have to add text-align: center to ul element like this:
你只需要像这样将 text-align: center 添加到 ul 元素：
.footer-nav{
text-align: center;
}
.footer-nav li {
list-style: none;
padding: 5px;
display: inline-block;
}
回答by thelightings
You should try replace li {float:left;} by li {display: inline-block;} and put its parent ul {text-align: center;}
您应该尝试将 li {float:left;} 替换为 li {display: inline-block;} 并将其父 ul {text-align: center;}
回答by Chetabahana
Add this into ulcss style
将此添加到ulcss样式中
section.video ul {
margin-top: 30px;
list-style-type:none;
display:flex;
justify-content: center;
}
See jsFiddle http://jsfiddle.net/tfLz08vd/83/
见 jsFiddle http://jsfiddle.net/tfLz08vd/83/
