Question

我正试图集中导航。 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;
}

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

如果有更好的方法来做到这一点，而不是我现在这样做，我愿意接受建议。

请帮帮我。

Answer 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>

Answer 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;
}

text-align：center不在我的导航中工作

2 个答案: