text-align: center not working in my nav

css, html, html-lists, nav, text-align

Solution

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>

Problem

I am trying to center my navigation. The CSS text-align: center; is not working. It doesn't seem to affect the nav in anyway, shape, or form. here's my 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> ``` here's my 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; } ``` Please note: I am trying to make the links centered horizontally as well as vertically. If there is a better way to do it than how I am doing it now, I am open to suggestions. Please help me.

Original source