使用 UL 时无法使列表居中答案

【问题标题】：Can't get list to center when using UL使用 UL 时无法使列表居中
【发布时间】：2014-03-20 09:42:44
【问题描述】：

我有几个 <li> 项目居中并在 <ul> 标记内显示内联，但我似乎无法让 <ul> 本身在页面上居中。您可以在此JSFiddle 上看到轻微的缩进问题。

这是列表的 HTML：

<ul>
    <li><a href="/index.html" title="Home">Home</a></li> |
    <li><a href="/knowing.html" title="Knowing">Knowing</a></li> |
    <li><a href="/caring.html" title="Caring">Caring</a></li> |
    <li><a href="/working.html" title="Working">Working</a></li> |
    <li><a href="/living.html" title="Living">Living</a></li> |
    <li><a href="/opportunities.html" title="Opportunities">Opportunities</a></li> |
    <li><a href="/medicalservices.html" title="Medical Staff Services">Medical Staff Services</a></li>
    <br> asdf &copy; 2014
</ul>

这是 CSS：

body {  
    font-size: 75%; /* Base browser font size is 14px */
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
    text-align: center;
    margin: 0 auto;
    width: 75%;
    clear: both;
}

a, a:link, a:hover, a:active, a:visited {
    text-decoration: none;
}

ul {
    margin: 0 auto;
}

li {
    text-align: center;
    display: inline;
}

.footer a:link, .footer a:visited, .footer a:active, .footer a:hover, {
    text-align: center;
    color: #cccccc;
}

令人讨厌的是，如果我从 HTML 中删除 <ul> 标记，列表会居中，但这是不正确的标记并且可能存在危险/问题。

我从类似问题中尝试了其他一些建议，例如将容器 div 定位在 width: 100%; 左侧和 position: relative;，将 <ul> div 定位在左侧并将其向左浮动 50%，然后将 @ 定位987654332@ 项向左并向右浮动 50%，但这不适用于我在每个 <li> 项之间的 | 分隔符。

我的标记是否仍然不正确？我是否有一些冲突的 CSS 值阻止它工作？无论如何，<ul> 列表总是缩进吗？

编辑：将 CSS 代码直接添加到帖子中。

【问题讨论】：

在 Chrome/Win 7 上看起来以我为中心。您使用的是什么浏览器？编辑没关系，我现在看到了。我的屏幕太大，无法真正注意到差异...@j08691 下面的答案是要走的路。
OT：对于有效的代码文本元素不允许直接在
@TanelEero 你知道以有效方式在列表项之间使用管道分隔符的方法吗？不让它们成为可点击链接的一部分。
只需将它们移到之后的
元素中。看看这个 jsfiddle.net/2GBEN

【解决方案2】：

看看这个例子，它在菜单项没有设置宽度的地方水平居中。
见这里：http://www.cssplay.co.uk/menus/centered.html

你需要的基本 CSS：

footer {
  clear: both;
  float: left;
  overflow: hidden;
  width: 100%;
}
ul {
   float: left;
   left: 50%;
   list-style-type: none;
   margin: 0 auto;
   padding: 0;
   position: relative;
}
li {
  float: left;
  position: relative;
  right: 50%;
}

注意：我特意删除了 | LI 之间的分隔符，因为这不是有效的 HTML。请参阅更改后的示例：http://jsfiddle.net/eNQyp/1/ 分隔符作为样式添加到 LI。它可以使用这种技术运行您的示例，并且是有效的 HTML。

【讨论】：

感谢您的回复；不幸的是，我特别提到这种技术不是一个合适的解决方案。