如何将DIV中的超链接居中？

Question

I have a set of hyperlinks (using the a tag) that are placed within a DIV and I would like them to center within that DIV. I have tried putting text-align (Italicized) on this DIV and have also tried margin 0 auto (Italicized) for the hyperlinks but they still stick firmly to the left.

Below is the HTML and the CSS code.

Thanks for the help!

HTML

<div id="navigation">
        <a class="nav" href="index.html">Home</a>
        <a class="nav" href="Page 1.html">Page 1</a>
        <a class="nav" href="Page 2.html">Page 2</a>
        <a class="nav" href="Page 3.html">Page 3</a>
        <a class="nav" href="Page 4.html">Page 4</a>
</div>

CSS

#navigation {
width: 100%;
height: 40px;
border: #000 solid 1px;
    *text-align: center;*
}

.nav {
text-align: center;
text-decoration: none;
display: block;
float: left;
width: 80px;
height: 40px;
background-color: #0F0; 
    *margin: 0 auto;*
}

Answer 1

Remove float:left from .nav class and add display:inline-block

.nav {
text-align: center;
text-decoration: none;
display: inline-block;
width: 80px;
height: 40px;
background-color: #0F0; 
}

Js Fiddle Demo

Answer 2

Remove the float.

Floated elements can not be centered using margin: 0 auto; . Adding float to a element makes it a block element. text-align: center doesn't affect block elements. It does affect inline-block though.

Answer 3

删除Float：离开我们的a（.nav）并将Text-align：center添加到div中。

Answer 4

你可以通过很多方式实现这一目标，但我认为你应该阅读Joshua Johnson在设计小屋中的这篇文章 ，这样你就可以了解更多关于如何集中任何内容的信息 。