How to centralize the left nav - html

Question

I having problems trying to centralize a bootstrap standard nav in a row.
<footer id="page_footer">
<div class="container">
<div class="row">
<div class="col-md-8">
<ul id="page_footer_links" class="nav nav-pills nav-center">
<li role="presentation">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
</ul>
</div>
<div class="col-md-4">
<p id="page_footer_wordpress" class="text-center">Orgulhosamente movido com WordPress!!!</p>
</div>
</div>
</div>
Here the complete fiddle: http://jsfiddle.net/vpontin/bkpnrLo0/
I tried putting text-center and center-block. None worked. Even putting margin 0 auto or text-align: center didn't work.
What i need to do?

Answer 1

The .nav-pills list items have default floating behavior to left. So change it to none and display them in one line using display: inline-block.
Updated JSfiddle
#page_footer {
background-color: #f5f5f5;
width: 100%;
}
#page_footer .container {
padding: 20px;
}
#page_footer_links {
margin: 0 auto;
text-align: center;
}
#page_footer_wordpress {
margin: 0px;
height: 40px;
line-height: 40px;
}
.nav-pills > li {
float: none !important;
display: inline-block !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<footer id="page_footer">
<div class="container">
<div class="row">
<div class="col-md-8">
<ul id="page_footer_links" class="nav nav-pills nav-center">
<li role="presentation">Home
</li>
<li role="presentation">Profile
</li>
<li role="presentation">Messages
</li>
</ul>
</div>
<div class="col-md-4">
<p id="page_footer_wordpress" class="text-center">Orgulhosamente movido com WordPress!!!</p>
</div>
</div>
</div>