如何将 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：

 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>

Answer 4

看起来你只需要text-align: center; 在ul

Answer 5

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

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

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

干杯，

杰克

Answer 6

另一种方法来做到这一点：

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

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

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

Answer 8

我添加了 div 行，它做到了：

<div style="text-align:center">
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>

Answer 9

我有一个比你更小的问题，我这么快，这是迄今为止我找到的最好的解决方案。

输出是什么样的

显示代码输出的样子边框只是为了显示间距，不需要。

---

网址：

    <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

text-align:center和display:inline-block都不适合我自己，但将两者结合起来：

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

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