twitter bootstrap - centered navigation bar - html

Question

I'm a little bit confused. I like to center the menu items of a normal bootstrap navigation bar.
But I can't find the right class i have to edit. should I use text-align, or margin: 0 auto; to realize something like this?
Currently I tried to add this CSS-arguments in .navbar, .navbar-inner and .nav.
Nothing works.
If there are some bootstrap dev's, please help me!
Do you know if there is a Forum for bootstrap stuff?

Answer 1

Assign fixed height, and then asign margin: 0 auto; to element that you have to center, but remember center div should not be floated or position: absolute; and it have fixed width
for example
<div class="parent">
<div class="inn"> ... </div>
</div>
To center .inn should have fixed width, and not floated or position: absolute,
i.e.
.inn{
width: 20px;
margin: 0 auto;}

Answer 2

To answer your question, it looks like the selector you should be modifying is .navbar .nav
Modifying that selector, you can proceed to implement your margin approach:
.navbar .nav {
margin: 0 auto;
width: ...px; /* width of .navbar .nav */
float: none;
}
or, similar to what Nick mentioned:
.navbar .nav {
position: absolute;
left: 50%;
margin-left: ...px; /* half of width of .navbar .nav */
}
I didn't delve into this too much, but it looks like .navbar .nav is getting a width associated to it (for me, it was 1170px). Because of its width, margin: 0 auto has no impact... would be nice to come up with a solution that didn't require hard-coding a width (or half-width margin-left).

Answer 3

You could try doing the following:
#div-id-inside-navbar{
left: 50%;
position: absolute;
margin-left: -100px /* This should be half the width of your centered content */
}
I have centered logos on my bootstrap site and this is what I had to do. I haven't looked into the exact reason why, but I don't believe text-align: center; was working all that well. This is similar to the way people often vertically center stuff with CSS.