数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学使用 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 的固定宽度导航栏
<!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 将导航栏居中对齐。
<!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 来居中导航栏。
<!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>
运行以上代码后，输出窗口将弹出，显示位于网页中心的导航栏。
3K+ 次查看
