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

Question

如何在不使用额外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>

检查jsfiddle http://jsfiddle.net/3Ezx2/1/

Answer 1

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

Answer 2

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

这应该有用。

Answer 3

更现代的方法是使用flexbox：

＆＃13;

＆＃13;

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

＆＃13;

<div>
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>  

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

您需要的只是text-align: center;

中的ul

Answer 5

之前我遇到过这个问题，发现有时填充是个问题。

通过从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>

希望能帮助任何人遇到同样的问题:)

干杯，

杰克

Answer 6

我添加了div行，它就是诀窍：

sudo pip install -r requirements.txt --upgrade --ignore-installed six

Answer 7

另一种方法：

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

Answer 8

text-align:center和display:inline-block都没有为我自己工作，但结合两者都做了：

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

Answer 9

我有一个问题比较简陋，我这很快就是我迄今为止找到的最好的解决方案。

输出结果如何

Shows what the output of the code looks like 边框只是为了显示间距而不需要。

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

并非所有内容都需要以列表项为中心。

你可以将css降低到此值以获得相同的效果：

    ul {list-style-type: none;}
    ul li{display: inline-block;}
    .center{width: 100%;}
    .dots{
        text-align: center;
        padding: 0px;}
    span{width: 100%;}

Answer 10

ul {
    width: 100%;
    background: red;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

li {
    background: blue;
    color: white;
    margin-right: 10px;
}

Answer 11

在Bootstrap（4）中，使用display: inline-flex，如下所示：

li {
    display: inline-flex;
    /* ... */
}

Answer 12

事情是 ul 标签带有默认的边距和填充，因此您需要做的就是：

ul {
    margin: 0px;
    padding: 0px;
}

Answer 13

// Ul css

ul{
  width: 100%;
  justify-content: center;
  list-style-type: none;
  display: flex;

}

// ul li css

ul li{
  display: inline;
}

Answer 14

我解决了这个问题。

HTML：

<div class="list-wrapper">
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
        <li>e</li>
    </ul>
</div>

CSS：

.list-wrapper {
   text-align: -webkit-center;
}
.list-wrapper ul {
    display:block;
}