如何使用 CSS 将 Bootstrap 3 中的导航栏内容居中？

CSS 居中导航栏内容

难以在 Bootstrap 的导航栏中居中内容？不要放弃！让我们使用提供的 HTML 和 CSS 代码片段进行故障排除。

问题：

使用 Bootstrap 3，但现有方法无法在导航栏中居中对齐内容。

HTML代码：

提供参考（但不包含在此处）。

修订的 CSS：

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.navbar .navbar-collapse {
  text-align: center;
}

说明：

• 删除浮动：从 .navbar .navbar-nav 左侧将内部导航居中。
• 设置显示：内联块以保持水平对齐。
• 调整垂直对齐：顶部以正确对齐。
• 包含 .navbar .navbar-collapse 来对齐折叠的内部内容

改进的代码片段：

<div class="navbar navbar-default" role="navigation">
  <!-- ... -->

  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <!-- ... -->
    </ul>
  </div>

  <!-- ... -->
</div>

响应式调整：

将居中效果限制为未折叠的导航栏，添加此媒体查询：

@media (min-width: 768px) {
  .navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
  }

  .navbar .navbar-collapse {
    text-align: center;
  }
}

现在，您的导航栏内容将在折叠和未折叠状态下轻松居中。

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