資料結構
網路
關係資料庫管理系統 (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+ 次檢視
