Twitter Bootstrap 导航栏是一个多功能组件，可以自定义以适应不同的布局。本文演示了如何将导航栏中的链接居中，解决常见的用户请求。
最初，导航栏中的链接是左对齐的，尽管中心对齐的预期结果。尝试使用预先存在的 CSS 规则没有产生所需的结果。
要使导航栏链接居中，我们需要设置链接到内联块和导航栏容器的文本对齐属性居中。以下是修改后的 CSS：
<code class="css">.navbar .nav,
.navbar .nav > li {
float: none;
display: inline-block;
*display: inline; /* ie7 fix */
*zoom: 1; /* hasLayout ie7 trigger */
vertical-align: top;
}
.navbar-inner {
text-align: center;
}</code>为了避免对其他导航部分进行不必要的修改，建议创建一个针对所需导航栏菜单的自定义类。例如，我们可以创建一个名为“center”的类：
<code class="html"><div class="navbar navbar-fixed-top center">
<div class="navbar-inner">
....
</div>
</div></code>然后，我们可以在 CSS 中定位该类：
<code class="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;
}</code>将主链接居中后，如果子菜单项受到更改的影响，则可能需要将子菜单项重新向左对齐。这可以通过附加 CSS 来实现：
<code class="css">.center .dropdown-menu {
text-align: left;
}</code>可以在此处找到此解决方案的实时演示：http://jsfiddle.net/C7LWm/7/。
以上是如何在 Twitter Bootstrap 中将导航栏链接居中？的详细内容。更多信息请关注PHP中文网其他相关文章！
