无序列表不会居中对齐

Posted 2023-03-05

【中文标题】无序列表不会居中对齐

【英文标题】：Unordered List Won't Center Align

【发布时间】：2015-01-17 10:52:29

【问题描述】：

h1 似乎没有问题居中，但是，列表（菜单栏）不会对齐，它似乎有点缩进。请解释一下。

我的 html：

<h1>Welcome!</h1>

    <ul>
        <li>Home</li>
        <li>About Us</li>
        <li>Contact</li>
    </ul>

我的 CSS：

h1
text-align: center;


ul
  position:relative;
  display: inline-block;  
  list-style: none;
  width:100%;
  text-align: center;
  margin: auto;


li
  list-style: none;
  text-align: center;
  margin: 15px; 
  display: inline-block; 

【参考方案1】：

ul 元素上仍有默认填充。 将 ul 的 CSS 更改为此，它会起作用：

ul
  position:relative;
  display: inline-block;  
  list-style: none;
  width:100%;
  text-align: center;
  margin: auto;
  padding: 0;