无法水平居中列表[重复]答案

【问题标题】：Cannot center list horizontally [duplicate]无法水平居中列表[重复]
【发布时间】：2019-09-02 13:58:48
【问题描述】：

我想在 div 中居中列表，但不能。 ol 元素居中（占据整个屏幕宽度）。但是所有的 li 元素都浮动到 ol 的右侧（左侧还有一些空间）。

#List1 {
  overflow: hidden; 
  text-align: center;
  background-color: #e9400d;
  width: 100%;
}

#List1 ol {
    background-color: blue;
}

#List1 li {
    margin: 0px auto;
    background-color: lightskyblue;
}

<div id="List1">
  <ol>
    <li>
      Elem1
    </li>
    <li>
      Elem2
    </li>
  </ol>
</div>

【问题讨论】：

你可以在这个div上添加display: flex; justify-content: center;

标签： css

【解决方案1】：

你想让 li 居中吗？如果是这样，您可以将文本对齐从 div 中取出并像这样更改 li 的宽度百分比......

#List1 {
    overflow: hidden; 
    background-color: #e9400d;
    width: 100%;
}

#List1 li {
    width: 80%;
    margin: 0px auto;
    background-color: lightskyblue; 
}

（显然宽度不必是80%，你可以玩到开心为止）

【讨论】：

【解决方案2】：

这个解决方案应该可行：

#List1 {
  overflow: hidden;
  background-color: #e9400d;
  width: 100%;
  text-align: center;
  list-style-position: inside;
}

#List1 li {
  background-color: lightskyblue;
}

<div id="List1">
  <ol>
    <li>
      Elem1
    </li>
    <li>
      Elem2
    </li>
  </ol>
</div>

【讨论】：

【解决方案3】：

试试这个：

   #List1 ol li 
      {
         display:inline;
      }

   #List1 
      {
        text-align: center; 
      }
   #List1 ol 
      { 
        list-style: none; 
      }

【讨论】：