CSS 在Twitter Bootstrap 2.0中居中导航栏的方法

在本文中，我们将介绍如何使用CSS在Twitter Bootstrap 2.0中居中导航栏。

阅读更多：CSS 教程

什么是Twitter Bootstrap 2.0？

Twitter Bootstrap是一个开源的CSS和JavaScript框架，用于构建现代化的响应式网站和Web应用程序。它提供了一套设计精美、易于使用和可定制的组件，包括导航栏。

如何创建一个基本的导航栏？

在Twitter Bootstrap 2.0中，我们可以使用以下HTML代码创建一个基本的导航栏：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

这将创建一个具有Logo和四个导航链接的基本导航栏。

如何居中导航栏？

要在Twitter Bootstrap 2.0中居中导航栏，我们需要使用CSS来实现。以下是两种常用的方法：

方法一：使用`text-align: center`

我们可以将以下CSS样式添加到导航栏的父元素上，以实现导航栏的居中：

.navbar {
  text-align: center;
}

这将使导航栏的链接居中对齐，但Logo将位于导航栏的左侧。

方法二：使用自定义的CSS样式

我们也可以使用自定义的CSS样式来居中导航栏。以下是一个示例：

.navbar {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

这将使用相对定位和transform属性将导航栏居中对齐。通过将左侧偏移设置为50%，并使用translateX(-50%)属性将导航栏的位置居中。

完整示例

下面是使用第二种方法居中导航栏的完整示例：

<style>
.navbar-centered {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
</style>

<nav class="navbar navbar-default navbar-centered">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

使用上述代码，导航栏将在页面水平居中对齐。