无法在 <ul> 内居中 <li>

Question

我试了很久。我找到了很多解决方案，但其中 none 行得通。我需要将 li 置于 ul 的中心（菜单 div 和 ul 是我需要的正确尺寸）。

CSS:

div.menu {
  padding-left: 10%;
  padding-right: 10%;
  margin: 0px;
}
li {
  float: left;
  list-style-type: none;
  width: 128px;
  height: 77px;
  margin: 0px;
  padding: 0px;
}
ul {
  text-align: center;
  margin: auto;
  padding: 0px;
}

HTML:

<div class="menu">
   <ul>
      <a href="#" class="menu"><li>Item 1</li></a>
      <a href="#" class="menu"><li>Item 2</li></a>
   </ul>
</div>

编辑：我需要水平所有 LI 居中。 Image

Answer 1

如果我没听错的话...试试那个：

CSS:

div.menu {
    margin: 0 10%;
    width: 128px; /* it's the root case */
}
ul {
    text-align: center;
    padding: 0;
    margin: 0;
}
li {
    list-style-type: none;
}

HTML:

<div class="menu">
    <ul>
        <li><a href="#" class="menu">Item 1</a></li>
        <li><a href="#" class="menu">Item 2</a></li>
    </ul>
</div>

Answer 2

如果你想居中 de

你必须给

中的文本那么你应该设置一个 text-align:center in你的
样式

Answer 3

这应该足以使文本居中。给 div 一个 ID 并将其居中。但要小心，因为应用浮动实际上会产生负面影响 - text-align:center; doesn't work

#centerText
{
text-align: center;
}

<div class="menu" id="centerText">
    <ul>
       <li></li>
    </ul>
</div>

Answer 4

首先，您需要为无序列表元素指定宽度。使用 flexbox 您可以使用 justify-content 使列表项居中或 space 它们围绕 ul。如果 li 元素在您的情况下浮动，则您不能将其居中。移除浮动并添加 display: inline-block，它应该也能正常工作。

*{margin: 0;}
.menu ul {
  list-style: none;
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  background: rgba(0,0,0,.5);
  padding: 30px 0;
}
.menu a{
  text-decoration: none;
  color: #ffffff;
}

<div class="menu">
    <ul>
        <li><a href="#" class="menu">Item 1</a></li>
        <li><a href="#" class="menu">Item 2</a></li>
              <li><a href="#" class="menu">Item 3</a></li>
              <li><a href="#" class="menu">Item 4</a></li>
              <li><a href="#" class="menu">Item 5</a></li>
    </ul>
</div>

Answer 5

对于 li class 尝试删除 float: left 并将其替换为 display: inline-block;。我认为那会做你想要完成的事情。如果没有，请给我们更多的细节。

CSS

div.menu {
    padding-left: 10%;
    padding-right: 10%;
    margin: 0px;
}
li {
    display: inline-block;
    list-style-type: none;
    width: 128px;
    height: 77px;
    margin: 0px;
    padding: 0px;
}
ul {
    text-align: center;
    margin: auto;
    padding: 0px;
}

代码笔：https://codepen.io/anon/pen/wdOaLd

Answer 6

如果您正在设计菜单，则需要此标记：

<div class="menu">
   <ul>
      <li><a href="#" class="menu">Item 1</a></li>
      <li><a href="#" class="menu">Item 2</a></li>
   </ul>
</div>

和这个 CSS 对齐项目：

div.menu {
  padding-left: 10%;
  padding-right: 10%;
  margin: 0px;
  background:lightcyan; //for visualization only
}

.menu ul {
  text-align: center;
  margin: auto;
  padding: 0px;
}

.menu ul li {
  display:inline-flex;
  list-style-type: none;
  width: 128px;
  height: 77px;
  margin: 0px;
  padding: 0px;
  text-align: center;
  background:lightblue; //for visualization only
  align-items:center;
  justify-content:center;
}

.menu ul li a {
  align-self:center;
}

检查 JSfiddle https://jsfiddle.net/r2gnkknv/

您将以此结束：

Answer 7

这是在这个问题上拯救我一天的代码：

.tab ul{list-style-type: none;margin: 0px;padding: 0px;text-align: center;}
.tab li{display: inline-block;padding: 2px;float: none !important;}

无法在 <ul> 内居中 <li>

Can't center <li> inside <ul>

html

css

menu

menuitem

centering