text-align: center not working in my nav - html

Question

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>Friends</li>
<li>Followers</li>
<li>Photos</li>
<li>Interests</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.

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>Friends</li>
<li>Followers</li>
<li>Photos</li>
<li>Interests</li>
</ul></nav>

Answer 2

You may be interested in this: 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;
}
If you use inline-block you'll need to space the elements out manually by setting the width: 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;
}