文字对齐：中心在我的导航中不起作用

debugcn 发表于 Dev

亚硝酸

我正在尝试将导航居中。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;
}

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

如果有比现在更好的方法，我愿意提出建议。

请帮我。

卡鲁皮亚RK

小提琴

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。