Html 如何将 UL 元素内的列表项居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8641251/
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 do I center list items inside a UL element?
提问by Pinkie
How do I center list items inside a ul without using extra divs or elements. I have the following. I thought text-align:centerwould do the trick. I can't seem to figure it out.
如何在不使用额外 div 或元素的情况下将 ul 中的列表项居中。我有以下内容。我以为text-align:center会做的伎俩。我似乎无法弄清楚。
<style>
ul {
width:100%;
background:red;
height:20px;
text-align:center;
}
li {
display:block;
float:left;
background:blue;
color:white;
margin-right:10px;
}
</style>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
Check jsfiddle http://jsfiddle.net/3Ezx2/1/
检查 jsfiddle http://jsfiddle.net/3Ezx2/1/
回答by sandeep
write display:inline-blockinstead of float:left.
写display:inline-block而不是float:left.
li {
display:inline-block;
*display:inline; /*IE7*/
*zoom:1; /*IE7*/
background:blue;
color:white;
margin-right:10px;
}
http://jsfiddle.net/3Ezx2/3/
http://jsfiddle.net/3Ezx2/3/
回答by Kishore Kumar
li{
display:table;
margin:0px auto 0px auto;
}
This should work.
这应该有效。
回答by hamncheez
A more modern way is to use flexbox:
一种更现代的方法是使用 flexbox：
ul{
list-style-type:none;
display:flex;
justify-content: center;
}
ul li{
display: list-item;
background: black;
padding: 5px 10px;
color:white;
margin: 0 3px;
}
div{
background: wheat;
}<div>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>回答by Pencilcheck
Looks like all you need is text-align: center;in ul
看起来你需要的一切都text-align: center;在ul
回答by jacobedawson
I have run into this issue before and found that sometimes padding is the issue.
我之前遇到过这个问题，发现有时填充是问题所在。
By removing padding from the ul, any li's set to inline-block will be nicely centred:
通过从 ul 中删除填充，任何设置为 inline-block 的 li 都将很好地居中：
* {
box-sizing: border-box;
}
ul {
width: 120px;
margin: auto;
text-align: center;
border: 1px solid black;
}
li {
display: inline-block;
}
ul.no_pad {
padding: 0;
}
p {
margin: auto;
text-align: center;
}
.break {
margin: 50px 10px;
}<div>
<p>With Padding (Default Style)</p>
<ul class="with_pad">
<li>x</li>
<li>x</li>
<li>x</li>
<li>x</li>
</ul>
<div class="break"></div>
<p>No Padding (Padding: 0)</p>
<ul class="no_pad">
<li>x</li>
<li>x</li>
<li>x</li>
<li>x</li>
</ul>
<div>Hope that helps anyone running into this same issue :)
希望能帮助任何遇到同样问题的人:)
Cheers,
干杯，
Jake
Hyman
回答by Gediminas
Another way to do this:
另一种方法来做到这一点：
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
ul {
width: auto;
display: table;
margin-left: auto;
margin-right: auto;
}
ul li {
float: left;
list-style: none;
margin-right: 1rem;
}
回答by Lyra
I added the div line and it did the trick:
我添加了 div 行，它做到了：
<div style="text-align:center">
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
回答by WalterTheSoyBoy
I had a problem slimier to yours I this quick and its the best solution I have found so far.
我有一个比你更小的问题，我这么快，这是迄今为止我找到的最好的解决方案。
What the output looks like
输出是什么样的
Shows what the output of the code looks likeThe borders are just to show the spacing and are not needed.
显示代码输出的样子边框只是为了显示间距，不需要。
Html:
网址：
<div class="center">
<ul class="dots">
<span>
<li></li>
<li></li>
<li></li>
</span>
</ul>
</div>
CSS:
CSS：
ul {list-style-type: none;}
ul li{
display: inline-block;
padding: 2px;
border: 2px solid black;
border-radius: 5px;}
.center{
width: 100%;
border: 3px solid black;}
.dots{
padding: 0px;
border: 5px solid red;
text-align: center;}
span{
width: 100%;
border: 5px solid blue;}
Not everything here is needed to center the list items.
并非此处的所有内容都需要将列表项居中。
You can cut the css down to this to get the same effect:
您可以将 css 减少到这个以获得相同的效果：
ul {list-style-type: none;}
ul li{display: inline-block;}
.center{width: 100%;}
.dots{
text-align: center;
padding: 0px;}
span{width: 100%;}
回答by che-azeh
Neither text-align:centernor display:inline-blockworked for me on their own, but combining both did:
既不单独text-align:center也不display:inline-block为我工作，但将两者结合起来：
ul {
text-align: center;
}
li {
display: inline-block;
}
回答by Rahul Mahto
ul {
width: 100%;
background: red;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
}
li {
background: blue;
color: white;
margin-right: 10px;
}
