CSS 中心引导程序的品牌和列表项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15305221/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Center bootstrap's brand and list items
提问by cherrun
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.
关于将 Twitter bootstrap 的品牌居中或将导航栏中的列表项居中，有几个问题，但我还没有弄清楚，如何将两者居中。
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:
这是一个示例，用于Modify twitter bootstrap navbar，但它仅将列表项居中，而不是品牌。这是 HTML 的结构：
<div class="navbar navbar-fixed-top center">
<div class="navbar-inner">
....
</div>
</div>
And the CSS:
和 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/
这里有一个现场演示：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?
我刚刚注意到，如果您在导航栏中有一个下拉列表（就像在您更新的答案中一样），下拉列表真的很乱（下拉根本不显示，如果它出现，表单背景就会消失）。更好的方法可能是，如果所有项目都没有居中并且有一条线，那么它们应该都在一条线上然后居中，类似于无响应视图，除了现在，还有第二个线。那可能吗？
采纳答案by Sherbrow
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.
你需要居中的不是<li>他们的容器。子元素是否浮动无关紧要，只有您真正想要居中的父inline-block元素需要是s。
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)
确保您的选择器足够具体以仅针对您想要的元素（即不是折叠按钮）
Updatewith responsive navbar : Responsive demo
使用响应式导航栏更新：响应式演示
@media (max-width: 979px) {
.navbar .brand,
.nav-collapse {
display: block;
}
}
回答by Ken Prince
To center a UL you don't need to write any classses.
要使 UL 居中，您无需编写任何类。
Bootstrap provides everything you need, just do this:
Bootstrap 提供了您需要的一切，只需执行以下操作：
<ul class="list-inline center-block text-center">
// your list
</ul>
