如何将 Twitter Bootstrap 导航栏链接居中？-css教程-PHP中文网

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

Patricia Arquette

发布： 2024-11-02 09:11:29

原创

437 人浏览过

How to Center Twitter Bootstrap Navbar Links?

集中 Twitter Bootstrap 导航栏链接

在尝试将 Twitter Bootstrap 导航栏中的链接对齐到中心时，用户在实现建议的CSS：

.tabs, .pills {
  margin: 0 auto;
  padding: 0;
  width: 100px;
}

登录后复制

但是，存在替代解决方案。

方法1：内联块显示

居中菜单项可以通过以下方式实现将导航栏及其 li 元素的显示属性设置为 inline-block，确保它们并排显示而没有任何浮动。

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

登录后复制

方法 2：自定义类

或者，应用自定义类，例如“center”，可以防止与其他页面部分的潜在冲突。

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

登录后复制

子菜单对齐修复

最后，要将子菜单项重新向左对齐，需要以下 CSS：

.center .dropdown-menu {
    text-align: left;
}

登录后复制

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