如何让 'ul' 居中？

Question

我正在尝试将 ul 用于手机。这是我的 HTML 代码：

<nav>
    <ul class="nav-items">
        <li class="nav-active"><a href="/">Home</a></li>
        <li class="nav-item"><a href="#nav-active">Fruits</a></li>
        <li class="nav-item"><a href="#nav-inactive">Veggies</a></li>
    </ul>
</nav>

我的CSS代码：

.nav-items {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
   font-weight: normal;
   justify-content: flex-end;
   margin-right: 30px;
   margin-top: 20px;
}

并且我保留了电话的媒体查询：

@media screen and (max-width: 500px) {
   .nav-items {
       margin: auto;
   }
}

如何制作 ul 中心（适用于手机）？

这才是我真正想要的：

Answer 1

试试这个 CSS 代码：

nav{
   text-align: center
}

Answer 2

@media screen and (max-width: 500px) {
   .nav-items {
       margin: auto;
       flex-direction: column;
   }
}

如果您希望最后一项换行：

@media screen and (max-width: 500px) {
    .nav-items {
        margin: auto;
        justify-content: center;
    }

    .nav-items li{
        text-align: center;
    }

   .nav-items li:last-of-type{
        width: 100%;
   }
}

Answer 3

有多种方法可以做到：

文本对齐方式（基于How can I center <ul> <li> into a div?）：

@media screen and (max-width: 500px) {
    .nav-items {
        text-align: center;
    }
    .nav-items>li>ul {
        display: inline-table;
    }
    .nav-items>li {
        display: inline;
    }
}

使用 Flexbox：查看。

Answer 4

<nav style="text-align: center;" >
    <ul style="list-style-type: none;" >
        <li>google</li>
        <li>bing</li>
        <li>yahoo</li>
    </ul>

</nav>

Answer 5

这一定是有效果的。试一试：

@media screen and (max-width: 500px) {
    nav{
        display: flex;
        justify-conten: center;
        align-content: center;
        align-items center;
        align-self: center;
    }
}

Answer 6

文件style.css

@media screen and (max-width: 500px) {
    .nav-items {
        margin: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

.sub-items {
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: center;
}

}

文件index.html

<ul class="nav-items">
    <ul class="sub-items">
    <li class="nav-active"><a href="/">Home</a></li>
    <li class="nav-item"><a href="#nav-active">Fruits</a></li>
    </ul>
    <li class="nav-item"><a href="#nav-inactive">Veggies</a></li>
</ul>

Answer 7

如果您不关心公告，那么您可以使用 <center> 标签。

<nav>
  <center>
    <ul class="nav-items">
        <li class="nav-active"><a href="/">Home</a></li>
        <li class="nav-item"><a href="#nav-active">Fruits</a></li>
        <li class="nav-item"><a href="#nav-inactive">Veggies</a></li>
    </ul>
  </center>
</nav>

Answer 8

您只需将 margin: auto 替换为 justify-content: space-between;。

此处margin: auto无事可做，因为该元素已经占据了页面的整个宽度。 margin: auto 在元素宽度小于页面宽度时有效，而 justify-content: space-between; 将第一个元素对齐，第二个元素居中，第三个元素居末。

这是您的代码：

.nav-items {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
   font-weight: normal;
   justify-content: flex-end;
   margin-right: 30px;
   margin-top: 20px;
}
@media screen and (max-width: 500px) {
   .nav-items {
       justify-content: space-between;
   }
}

此外，如果您只想制作中间的元素，可以使用justify-content: center;、align-items: center;。这将使它们位于 .nav-items.

的中间

例子

.nav-items {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
   font-weight: normal;
   justify-content: flex-end;
   margin-right: 30px;
   margin-top: 20px;
}
@media screen and (max-width: 500px) {
   .nav-items {
       justify-content: center;
       align-items: center;
   }
}

Answer 9

这可能会有所帮助。请参阅下面的输出。我在下面给出了输出截图 link。

@media screen and (max-width: 500px) {
    .nav-items {
        justify-content: center;
    }

    .nav-items li:nth-of-type(3) {
        width: 100%;
        text-align: center;
    }
}

See the output

Answer 10

非常简单易行的方法，因为不涉及强制宽度或父 div。

ul {
  display: table;
  margin: 0 auto;
}

<ul>
    <li>12345678910</li>
    <li>638023274</li>
    <li>12323145645</li>
  </ul>

如何让 'ul' 居中？

How can I center a 'ul'?

html

css

centering

文件style.css

文件index.html

例子