如何将 Twitter Bootstrap 导航栏导航链接居中？

修改 Twitter Bootstrap 导航栏：使导航链接居中

Twitter Bootstrap 导航栏为网站导航提供了实用的解决方案。但是，有时您可能想要自定义其外观，例如使导航链接居中。

问题：使导航链接居中

修改导航栏的对齐方式需要一些 CSS 代码。然而，某些方法可能不会产生预期的结果。让我们探索正确的方法。

解决方案：内联块布局和文本对齐

要居中导航菜单项，请将其显示属性设置为 inline-block 而不是 float: left。这将允许项目水平对齐而不破坏布局。此外，将导航栏内部容器的文本对齐属性设置为居中。

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

定位特定导航栏实例

如果您的网页上有多个导航栏，建议创建一个专用 CSS 类来定位您想要居中的特定导航栏。这将防止对其他导航栏产生不必要的影响。

<code class="html"><div class="navbar navbar-fixed-top center">
    <div class="navbar-inner">
        ....
    </div>
</div></code>

<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/show /

以上是如何将 Twitter Bootstrap 导航栏导航链接居中？的详细内容。更多信息请关注PHP中文网其他相关文章！