Css 对齐ul标签中的中心菜单选项

我想将菜单居中对齐，我尝试使用文本对齐，但仍然没有结果

以下是html代码：

<div id="menu" class="clearfix">
  <ul>
    <li><a href="{$base_url}/index.php">HOME</a></li>
    <li><a href="{$base_url}/recent/">WATCH</a></li>
    <li><a href="{$base_url}/tags/">TAGS</a></li>
    <li><a href="{$base_url}/channels/">CHANNELS</a></li>
  </ul>
  <br style="clear:both">
</div>

有什么建议吗

---

谢谢。

您在

li

上有

float:left

。把那句话去掉：

#menu li {
  display: inline;
  background-color: black;
}

由于不再需要浮动，您也可以去掉

，因为它现在只需在菜单下面放一个空行

这里有一个关于的教程

浮动通常用于将图像推到一边或另一边，而 将段落的文本环绕在其周围

设置

然后设置

#menu li{
  margin:0px auto;
}

这将使顶部和底部边距保持为0px，但将自动检测左侧和右侧边距，并使它们相等并居中

同时，移除

float:left; 

从

---

我相信您正在尝试使用文本align:center将#菜单标记的内容居中。这不起作用，因为里面有“ul”。我要做的是从#菜单标记中删除文本align:center

然后在#菜单ul标签中添加：

margin: 0 auto; /* this will center the UL, but needs to be used with a width set */
width: 500px; /* change this to the width you desire */

---

为了使块级元素在页面上居中，您需要提供一个小于其嵌套的父元素宽度的宽度，然后将左侧和右侧的边距设置为自动

您不需要前两个更改中的任何一个。菜单已经有文本对齐中心，这也将应用于它的子菜单。“边距0自动”是不必要的，因为一旦删除浮动，它已经居中。无论如何，它在这里也不起作用。

float:left; 

#menu li

margin: 0 auto; /* this will center the UL, but needs to be used with a width set */
width: 500px; /* change this to the width you desire */