Centering links (within li's) in Bootstrap navbar - html

Question

I've implemented the solution here which almost solves my problem, however, I need the <ul class="nav"> to be centered between the entire navbar and not just the elements adjacent to it (<a class="brand"> and <p class="navbar-text pull-right"> in my case).
Important: I customized my navbar to be 96px instead of the default 40px, and I want the <ul class="nav"> to appear centered and "underneath" the other elements as it will have its own background-color etc.
Here is my code so far:
<div class="navbar navbar-inverse navbar-fixed-top center">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/home"><img src="http://jayeshcp.files.wordpress.com/2013/03/twitter-bootstrap.jpg" style="width:400px;height:60px;" /></a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<p class="navbar-text pull-right">
<input class="span2" type="text" placeholder="Email">
<input class="span2" type="password" placeholder="Password">
</p>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
Note the extra center class that I added - that is from the solution that I linked to. It looks like this:
.center.navbar .nav,
.center.navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}
.center .navbar-inner {
text-align:center;
}
.center .dropdown-menu {
text-align: left;
}
How do I center the ul and give it padding above without breaking everything else in Bootstrap? Would offer more than bounty if there was another currency!
edit: jsfiddle is here (I pasted the whole minified css file (with the customized navbar height) instead of referencing it, sorry. Underneath it are the other customizations.)

Answer 1

p.navbar-text
{
float: none;
position: relative;
text-align: right;
}
.navbar .nav
{
display:block !important;
float: right !important;
width: 100%;
}
jsfiddle: http://jsfiddle.net/C7LWm/103/
Here's the solution for placing it underneath instead of below:
.navbar .nav
{
position: absolute;
left:0;
right:0;
width: 100%;
background-color:yellow;
}
p.navbar-text
{
width: 440px;
text-align:right;
position:relative;
z-index:2
}
.navbar .brand
{
position: relative;
z-index:2;
padding: 0;
width: 30%;
height: 60px;
background-image: url('http://placehold.it/400x60&text=Your Logo Here');
background-repeat: no-repeat; background-size: contain;
margin: 18px 0;
background-position: center left
}
.navbar .brand img
{
display:none;
}
Jsfiddle: http://jsfiddle.net/C7LWm/109/