中心自举的品牌和列表项 [英] 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.

下面是一个例子，在修改叽叽喳喳引导导航栏使用，但它只是居中列表中的项目，而不是品牌。 下面是HTML的结构：

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>

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

下面一个现场演示： http://jsfiddle.net/C7LWm/

如何将我中心无论是品牌和列表项，使两者都集中在同一行？

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

修改

我刚刚注意到，如果您在导航栏（如在更新后的答案）下拉，下拉真的搞砸了（下拉菜单没有出现在所有的，如果它出现时，窗体背景消失）。 一种更好的方法很可能是，如果所有的项目不居中并通过它的1有一条线，而不是他们都应该在一行，然后居中，类同的非响应视图，除了现在，有一个第二线。 这可能吗？

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?

推荐答案

您需要中心什么是不是＆LT;李＆GT; ，但它们的容器。这不要紧，如果一个子元素是浮动的，只有你真正想要居中家长需 inline-block的取值。

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)

更新与响应导航栏：响应演示

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

这篇关于中心自举的品牌和列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！