CODEWITHSUNDEEP
csstwitter-bootstrapalignment
cherrun
cherrun

Reputation: 2142

Center bootstrap's brand and list items

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?

Upvotes: 4

Views: 20691

Answers (2)

Ken Prince
Ken Prince

Reputation: 1496

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>

Upvotes: 21

Sherbrow
Sherbrow

Reputation: 17379

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

Upvotes: 3

Related Questions