我正在尝试将链接 1、链接 2 和链接 3 在以下页面中居中:
http://i.imgur.com/qNimZCs.png?1
这是 html 的相关部分:
<a class="logo" href="#"><p>Logo</p></a>
<ul class="nav">
<li><a class="link" href="#"><p>Link 1</p></a></li>
<li><a class="link" href="#"><p>Link 2</p></a></li>
<li><a class="link" href="#"><p>Link 3</p></a></li>
</ul>
这是CSS:
.link
{
font-size: 1em;
margin-left: 0;
margin-right: 0;
font-weight: none;
text-decoration: none;
color: #123456;
display: inline-block;
padding: 0 0;
}
.nav
{
margin-left: 0;
display: inline-block;
margin-bottom: 5px;
margin-top: 5px;
}
.nav li
{
display: inline-block;
margin: auto;
}
我已经尝试了所有我能想到的组合。
具体来说,我试图将链接居中,以便它们沿着导航栏均匀分布。有人看到我做错了什么吗?
编辑:
jsfiddle 链接:http://jsfiddle.net/B362m/
最佳答案
试试这个:
.nav
{
display: inline-block;
margin-left: 5%;
margin-bottom: 5px;
margin-top: 5px;
text-align: center;
}
关于html - 无法弄清楚如何使用 CSS 将导航栏中的多个链接居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24377628/