不能在 <ul> 中居中 <li>答案

【问题标题】：Can't center <li> inside <ul>不能在 <ul> 中居中 <li>
【发布时间】：2017-10-25 08:33:27
【问题描述】：

我尝试了很长时间。我找到了很多解决方案，但都没有奏效。我需要将 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 居中 horizontaly。 Image

【问题讨论】：

什么需要居中，需要垂直居中还是水平居中。说出你想要达到的目标。
您的 HTML 无效。 <ul> 的第一个孩子只能是 <li>

标签： html css menu menuitem centering

【解决方案1】：

如果你正在设计一个菜单，你需要这个标记：

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

你会这样结束：

【讨论】：

【解决方案2】：

如果我理解正确的话……试试那个：

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>

【讨论】：

【解决方案3】：

如果你想居中 de

你必须给

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

【讨论】：

【解决方案4】：

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

#centerText
{
text-align: center;
}

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

【讨论】：

【解决方案5】：

对于 li 类，尝试移除 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;
}

Codepen：https://codepen.io/anon/pen/wdOaLd

【讨论】：

【解决方案6】：

首先，您需要为无序列表元素指定宽度。使用flexbox，您可以使用 justify-content 将列表项居中或围绕 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>

【讨论】：

【解决方案7】：

这是在这个问题上节省了我一天的代码：

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

【讨论】：