Center bootstrap's brand and list items

Question

There are several questions about centering Twitter bootstrap's brand or centering the list items in the navigation bar, but I haven't figured out, how to center both.

Here is an example, used in Modify twitter bootstrap navbar, but it only centers the list items, not the brand. Here is the structure of the HTML:

<div class="navbar navbar-fixed-top center">
     <div class="navbar-inner">
        ....
     </div>
</div>

And the CSS:

.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;
}

Here a live demo: http://jsfiddle.net/C7LWm/

How would I center both the brand and the list items, so that both are centered on one line?

EDIT:

I just noticed that if you have a dropdown in the nav bar (like in your updated answer), the dropdown is really messed up (dropdown not showing up at all, if it shows up, the form background disappears). A better way would probably be, if all the items are not centered and have a line by its one, instead they should all be on one line and then be centered, similiar to the non-responsive view, except now, there is a second line. Is that possible?

Answer 1

To center a UL you don't need to write any classses.

Bootstrap provides everything you need, just do this:

<ul class="list-inline center-block text-center">
 // your list
</ul>