html - 无法弄清楚如何使用 CSS 将导航栏中的多个链接居中

Question

我正在尝试将链接 1、链接 2 和链接 3 在以下页面中居中:

http://i.imgur.com/qNimZCs.png?1

这是 html 的相关部分:

<a class="logo" href="#"><p>Logo</p></a>

<ul class="nav">
    <li><a class="link" href="#"><p>Link 1</p></a></li>
    <li><a class="link" href="#"><p>Link 2</p></a></li>
    <li><a class="link" href="#"><p>Link 3</p></a></li>
</ul>

这是CSS:

.link
{
    font-size: 1em;
    margin-left: 0;
    margin-right: 0;
    font-weight: none;
    text-decoration: none;
    color: #123456;
    display: inline-block;
    padding: 0 0;

}

.nav
{
    margin-left: 0;
    display: inline-block;
    margin-bottom: 5px;
    margin-top: 5px;
}

.nav li
{
    display: inline-block;
    margin: auto;
}

我已经尝试了所有我能想到的组合。

具体来说，我试图将链接居中，以便它们沿着导航栏均匀分布。有人看到我做错了什么吗？

编辑:

jsfiddle 链接:http://jsfiddle.net/B362m/

Answer 1

试试这个:

.nav
{
  display: inline-block;
  margin-left: 5%;
  margin-bottom: 5px;
  margin-top: 5px;
  text-align: center;
}

Working Fiddle