无法弄清楚如何使用 CSS 在导航栏中将多个链接居中答案

【问题标题】：Cannot figure out how to center multiple links in a navigation bar using CSS无法弄清楚如何使用 CSS 在导航栏中将多个链接居中
【发布时间】：2014-08-14 04:25:11
【问题描述】：

我正在尝试将链接 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/

【问题讨论】：

请提供jsfiddle
@DoanCuong jsfiddle.net/B362m -- 如果还没有，缩小结果窗口，直到它捕捉到移动设置

标签： html css web media-queries centering

【解决方案1】：

试试这个：

.nav
{
  display: inline-block;
  margin-left: 5%;
  margin-bottom: 5px;
  margin-top: 5px;
  text-align: center;
}

Working Fiddle

【讨论】：

【解决方案2】：

你有很多 CSS。（考虑为单独的边距值使用简写？）两件事..

1) 如果您的元素是 inline-block，那么您可以在父元素上设置 text-align 以相应地将内容移动到左/中/右。

2) 您的链接已经只是文本，那么您将它们设置为 inline-block 而不是 inline 是否有特定原因？并不是说它有什么大不了的.. 设置 inline-block 将允许您设置填充并增加可点击区域。

无论如何...这应该对齐您的链接：

.nav {
  text-align: center;
  display:block;
}

.link {
  display: inline-block;
  margin: 0 5px;
  padding: 5px;
}

【讨论】：

【解决方案3】：

您还可以使用display:table 和display:table-cell 来获得您想要的外观。

试试这个：

.nav
{
    margin:auto;
    width: 80%; 
    display:table;
    padding:0;
    text-align:center;
}

.nav li
{
    display: table-cell;
}

JSFiddle Demo

【讨论】：