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

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

小提琴

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>