如何将列表项置于UL元素中心？

How do I center list items inside a ul without using extra divs or elements. I have the following. I thought text-align:center would 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/

9 个解决方案

#1

write display:inline-block instead of float:left.

write 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/

#2

li{
    display:table;
    margin:0px auto 0px auto;
}

This should work.

这应该工作。

#3

Looks like all you need is text-align: center; in ul

看起来你需要的只是text-align：center;在ul

#4

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>

#5

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中删除填充，任何设置为内联块的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

可靠的人

#6

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>

#7

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;
}

http://jsfiddle.net/f6qgf24m/

http://jsfiddle.net/f6qgf24m/

#8

Neither text-align:center nor display:inline-block worked for me on their own, but combining both did:

text-align：center和display：inline-block都不能单独为我工作，但结合两者都做到了：

ul {
  text-align: center;
}
li {
  display: inline-block;
}

#9

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 like The 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:

    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%;}

---