html5导航中的居中链接

Question

我需要将 HTML <nav> 元素内的所有链接内容（在本例中为所有数字）居中。

CSS：

section nav {
    border: 1px solid #ccc;
    clear: left;
    float: left;
    height: 28px;
    margin: 10px auto 0;
    width: 598px;
    overflow: hidden;
}

section nav a {
    float: left;
    padding: 5px 10px;
}

html：

<section>
    <nav>
            <a href="https://puaction.com/pua-0/">0</a>
            <a href="https://puaction.com/pua-1/">1</a>
            <a href="https://puaction.com/pua-2/">2</a>
            <a href="https://puaction.com/pua-3/">3</a>
            <a href="https://puaction.com/pua-4/">4</a>
            <a href="https://puaction.com/pua-5/">5</a>
            <a href="https://puaction.com/pua-6/">6</a>
            <a href="https://puaction.com/pua-7/">7</a>
            <a href="https://puaction.com/pua-8/">8</a>
            <a href="https://puaction.com/pua-9/">9</a>
            <a href="https://puaction.com/pua-10/">10</a>
        </nav>
</section>

jsFiddle： http://jsfiddle.net/EEtD4/

:)

谢谢！

Answer 1

http://jsfiddle.net/EEtD4/1/

添加了这个

section nav {
   text-align: center;
}

改变了

section nav a {
   float: left;  /* removed this */
}

---

编辑

另外，为了让链接也垂直居中，我这样做了

section nav {
      line-height: 28px;
}

而不是

  height: 28px;

http://jsfiddle.net/EEtD4/2/