Html如何将 anchor 显示为 block 并将其居中放置在同一行中

Question

我正在尝试使用 anchor 元素来显示 block 。当我这样做时，所有的 anchor 元素都是从上到下列出的，而不是都在同一行。我知道我可以用左/右浮动来解决这个问题，但我想将它全部居中对齐。这是我的 html

<nav id="navigation">
    <a id="navigation-anchor-normal" href="contact.html">Contact</a>
    <a id="navigation-anchor-normal" href="plugins.html">Plugins</a>
    <a id="navigation-anchor-current" href="home.html">Home</a>
    <a id="navigation-anchor-normal" href="games.html">Games</a>
    <a id="navigation-anchor-normal" href="donate.html">Donate</a>
</nav>

这是我的 CSS

#navigation {
    text-align:center;
}
#navigation-anchor-normal {
    text-decoration:none;
    color:aqua;
    display:block;
    padding:10px 15px;
}
#navigation-anchor-current {
    text-decoration:none;
    color:aqua;
    display:block;
    padding:10px 15px;
}

无论如何我可以将这些 anchor 元素居中放在同一行上吗？

Answer 1

将 float: left 放在#navigation-anchor-current 和#navigation-anchor-normal 上，然后编辑容器框样式以使所有文本居中

fiddle 链接:http://jsfiddle.net/uhyu3dsy/

#navigation {
text-align:center;
}
#navigation-anchor-normal {
    text-decoration:none;
    color:aqua;
    display:block;
    padding:10px 15px;
    float:left;
}
#navigation-anchor-current {
    text-decoration:none;
    color:aqua;
    display:block;
    padding:10px 15px;
    float:left;
}