Question

我有一组放在DIV中的超链接（使用a标签），我希望它们在DIV中居中。我已经尝试将text-align（斜体）放在这个DIV上，并且还尝试使用margin 0 auto（斜体）作为超链接，但它们仍然牢牢地贴在左边。

下面是HTML和CSS代码。

感谢您的帮助！

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

从float:left课程中移除.nav并添加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

移除浮动。

使用margin: 0 auto;无法居中浮动元素。将float添加到元素使其成为块元素。 text-align: center不会影响块元素。它确实会影响内联块。

Answer 3

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

Answer 4

你可以通过很多方式实现这一目标，但我认为你应该在设计小屋中阅读约书亚·约翰逊的post，以便你了解更多how to center anything。

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

4 个答案: