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?

Ken Prince · Answer 1 · 2015-07-15T23:09:14.257

21

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>

edited Jul 15 '15 at 23:09

answered Apr 10 '14 at 05:26

Ken Prince

1,437
1
20
26

3

This is the best answer here, no need to re-invent the wheel. – potsed Jun 02 '14 at 22:14
the perfect answer – Nejmeddine Jammeli Mar 31 '16 at 09:21

Sherbrow · Accepted Answer · 2013-03-09T10:53:08.037

3

What you need to center is not the <li> but their container. It doesn't matter if a child element is floating, only the parents that you actually want to center need to be inline-blocks.

I wouldn't say that it's nice, and you may need a different behavior on smaller screens, but this works in the demo :

.navbar .brand,
.nav-collapse {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}
.navbar-inner > .container { text-align:center; }

Make sure your selectors are specific enough to target only the elements you want (i.e. not the collapse button)

Update with responsive navbar : Responsive demo

@media (max-width: 979px) {
    .navbar .brand,
    .nav-collapse {
        display: block;
    }
}

edited Mar 09 '13 at 10:53

answered Mar 09 '13 at 00:45

Sherbrow

17,279
3
64
77

Yes, it works fine if you use it without the collapsing. As soon as the navbar collapses, it looks weird again. When the navbar collapses, the brand should be centered and the list items should move to the next row, not next to the brand. Probably not as easy to fix. – cherrun Mar 09 '13 at 08:34
Sorry to revert the answer, please see my first post for further explanation. – cherrun Mar 10 '13 at 15:42
1

@cherrun I don't see any problem with the dropdowns. Check https://github.com/twitter/bootstrap/issues/6019 to resolve a collapse dysfunction. – Sherbrow Mar 10 '13 at 16:00

Center bootstrap's brand and list items

2 Answers2

Linked