使用 CSS 居中导航栏链接

网站或应用程序最关键的组成部分之一是导航栏。它通常位于应用程序的顶部，使用户可以轻松访问网站或应用程序最重要的区域或页面。

网站的主要部分基本上都链接到导航栏。这些链接通常被称为导航项，您可以选择将其左对齐、居中对齐或右对齐。

居中导航栏

根据您已经用于创建导航栏的 HTML 和 CSS，居中导航栏可能既简单又复杂。例如，如果您没有在导航项上使用浮动属性，则在<nav>上应用text-align: center; 将自动将导航项居中。但是，如果您已经使用了浮动属性，则在<nav>上应用 text-align: center; 将不会将其居中。

margin: auto; 是另一种可能有效的方法，但它只有在导航栏具有固定宽度时才有效，而这正是您应该始终避免的。

考虑到所有这些因素，我发现了一种实用的方法，无论您已经使用了哪些 CSS，它都能在任何情况下都能工作。使用 CSS Flexbox 模块是解决方案。您可以使用 CSS flexbox 模块（一个灵活的布局模块）来创建响应式网页，而无需使用浮动和定位属性。

为了使用 CSS flexbox 居中导航栏，需要将导航栏设置为 flex 容器，方法是在其上应用display: flex;。然后可以使用 justify-content 属性将导航元素左对齐、居中对齐或右对齐。

示例

让我们来看下面的示例，我们将使用 margin:auto 来居中宽度为 400px 的固定宽度导航栏。

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      .tp {
         background-color: #D2B4DE;
         overflow: hidden;
         width: 400px;
         margin: auto;
      }
      .tp a {
         color: #DE3163;
         font-family: verdana;
         padding: 2px 10px;
         text-decoration: none;
         font-size: 19px;
      }
      .tp a:hover {
         background-color: #B2BABB;
         color: #FBFCFC;
      }
      .tp a.active {
         background-color: #D6EAF8;
         color: #2C3E50;
      }
   </style>
</head>
<body style="background-color:#D5F5E3">
   <div class="tp">
      <a href="#">Home</a>
      <a href="#codingground">Coding Ground</a>
      <a class="active" href="#Jobs">Jobs</a>
   </div>
</body> 
</html>

运行以上代码后，将生成一个输出，其中导航栏位于网页的中心。

示例

考虑另一种情况，我们将使用 justify-content:center 将导航栏居中。

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      .tp {
         background-color: #D5F5E3;
         display: flex;
         justify-content: center;
      }
      .tp a {
         color: #6C3483;
         font-family: verdana;
         text-align: center;
         padding: 10px 10px;
         text-decoration: none;
         font-size: 20px;
      }
      .tp a:hover {
         background-color: #F9E79F;
         color: #212F3D;
      }
      .tp a.active {
         background-color: #DE3163;
         color: #FBFCFC;
      }
   </style>
</head>
<body>
   <div class="tp">
      <a href="#html">HTML</a>
      <a class="active" href="#css">CSS</a>
      <a href="#javascript">JavaScript</a>
   </div>
</body>
</html>

运行以上代码后，将弹出输出窗口，显示位于网页中心的导航栏。

示例

在下面的示例中，我们将使用 text-align:center 来居中导航栏。

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      ul {
         list-style-type: none;
         margin: 0;
         padding: 0;
         width: 200px;
      }
      li a {
         display: block;
         background-color: #F0E7E7;
         text-decoration: none;
      }
      .active {
         background-color: #4CAF50;
         color: white;
      }
      li {
         text-align: center;
         border-bottom: 1px solid #555;
      }
   </style>
</head>
<body>
   <ul>
      <li>
         <a href="#home">Home</a>
      </li>
      <li>
         <a href="#company" class="active">Company</a>
      </li>
      <li>
         <a href="#product">Product</a>
      </li>
      <li>
         <a href="#services">Services</a>
      </li>
      <li>
         <a href="#contact">Contact</a>
      </li>
   </ul>
</body>
</html>

运行以上代码后，将弹出输出窗口，显示位于网页中心的导航栏。

更新于：2024年1月8日

3K+ 次查看

开启你的职业生涯

完成课程获得认证

开始学习
广告