文本对齐：中心在我的导航中不起作用答案

【问题标题】：text-align: center not working in my nav文本对齐：中心在我的导航中不起作用
【发布时间】：2014-01-29 04:10:11
【问题描述】：

我正在尝试使导航居中。 CSS text-align: center;不管用。无论如何，它似乎不会影响导航，形状或形式。

这是我的html：

<nav id="user_nav"><ul>
       <li><a href="#">Friends</a></li>
       <li><a href="#">Followers</a></li>
       <li><a href="#">Photos</a></li>
       <li><a href="#">Interests</a></li>
</ul></nav>

这是我的 CSS：

#user_nav {
    height: 60px;
    border-bottom: 1px solid black;
    width: 100%;
}

#user_nav ul {
    margin: 0 auto;
    width: 100%;
}

#user_nav ul li {
    list-style: none;
    display: inline;
    text-align: center;
}

#user_nav ul li a {
    padding: 15px 25px 0 0;
    font-size: 18px;
    float: left;
}

请注意：我正在尝试使链接水平和垂直居中。

如果有比我现在做的更好的方法，我愿意接受建议。

请帮帮我。

【问题讨论】：

您不能将text-align 与float 一起使用：float 将阻止它成为display: inline; 类型的元素，而text-align 要求该元素是inline或inline-block.
@setek 出于某种原因，当我不添加 float: left; CSS不会让我水平居中它。如果您知道更好的方法，请回答问题

标签： html css html-lists nav text-align

【解决方案1】：

Fiddle

CSS

 #user_nav {
    height: 60px;
    border-bottom: 1px solid black;
    width: 100%;
}

#user_nav ul {
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

#user_nav ul li {
    list-style: none;
    display: inline-block;    
}

#user_nav ul li a {
    vertical-align: middle;
    padding: 15px 25px 0 0;
    font-size: 18px;
    display: block;
}

HTML

<nav id="user_nav"><ul>
       <li><a href="#">Friends</a></li>
       <li><a href="#">Followers</a></li>
       <li><a href="#">Photos</a></li>
       <li><a href="#">Interests</a></li>
</ul></nav>

【讨论】：

你先生，真是个天才。非常感谢。
没有理由在a 上使用display: table-cell;：您可以将其作为block。它受父 inline-block 的约束。
+1 除了我之前的评论，这很好。您可能想花时间解释为什么 OP 的代码不起作用，以及为什么您的代码会起作用。

【解决方案2】：

您可能对此感兴趣：Live demo (click).

#user_nav {
  height: 60px;
  border-bottom: 1px solid black;
  width: 100%;
}

#user_nav ul {
  width: 100%;
  display: table;
}

#user_nav ul li {
  list-style: none;
  display: table-cell;
  font-size: 18px;
}

如果您使用inline-block，则需要通过设置宽度手动分隔元素：Live demo (click).

#user_nav {
  height: 60px;
  border-bottom: 1px solid black;
  width: 100%;
}

#user_nav ul {
  width: 100%;
}

#user_nav ul li {
  list-style: none;
  display: inline-block;
  width: 24%;
  font-size: 18px;
}

【讨论】：