我有一组放置在 DIV 中的超链接(使用 a 标签),我希望它们在该 DIV 中居中。我尝试过在此 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;*
}
最佳答案
从 .nav
类中删除 float:left
并添加 display:inline-block
.nav {
text-align: center;
text-decoration: none;
display: inline-block;
width: 80px;
height: 40px;
background-color: #0F0;
}
<强> Js Fiddle Demo
关于css - 如何使 DIV 中的超链接居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21816787/