Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Center links in a Navigation Bar with CSS
One of the most crucial components of a website or application is the navigation bar. It usually sits at the top of your application and makes it simple for users to navigate to the most important sections or pages of your website.
The major sections of your website are essentially linked from a navbar. These links are commonly known as navigation items, and you can align them to the left, center, or right based on your design requirements.
Syntax
/* Method 1: Using Flexbox */
nav {
display: flex;
justify-content: center;
}
/* Method 2: Using text-align */
nav {
text-align: center;
}
/* Method 3: Using margin auto with fixed width */
nav {
width: fixed-value;
margin: auto;
}
Method 1: Using Flexbox (Recommended)
The most reliable method to center navigation links is using CSS Flexbox. This approach works regardless of other CSS properties you may have applied −
<!DOCTYPE html>
<html>
<head>
<style>
.navbar {
background-color: #333;
display: flex;
justify-content: center;
padding: 0;
}
.navbar a {
color: white;
font-family: Arial, sans-serif;
text-align: center;
padding: 14px 20px;
text-decoration: none;
font-size: 16px;
transition: background-color 0.3s;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.navbar a.active {
background-color: #4CAF50;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#home">Home</a>
<a href="#about">About</a>
<a class="active" href="#services">Services</a>
<a href="#contact">Contact</a>
</div>
</body>
</html>
A horizontal navigation bar with centered links appears. The "Services" link is highlighted in green, and links change color when hovered over.
Method 2: Using Margin Auto with Fixed Width
This method centers the entire navigation container by giving it a fixed width and using margin: auto −
<!DOCTYPE html>
<html>
<head>
<style>
.navbar {
background-color: #f8f9fa;
overflow: hidden;
width: 400px;
margin: 20px auto;
border: 1px solid #ddd;
border-radius: 5px;
}
.navbar a {
float: left;
color: #495057;
font-family: Arial, sans-serif;
padding: 12px 16px;
text-decoration: none;
font-size: 16px;
}
.navbar a:hover {
background-color: #e9ecef;
}
.navbar a.active {
background-color: #007bff;
color: white;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#home">Home</a>
<a href="#tutorials">Tutorials</a>
<a class="active" href="#library">Library</a>
<a href="#tools">Tools</a>
</div>
</body>
</html>
A centered navigation bar with fixed width appears in the middle of the page. The "Library" link is highlighted in blue.
Method 3: Using Text-Align for Vertical Navigation
For vertical navigation menus, you can center the links using text-align: center −
<!DOCTYPE html>
<html>
<head>
<style>
.vertical-nav {
list-style-type: none;
margin: 20px auto;
padding: 0;
width: 200px;
background-color: #f1f1f1;
border: 1px solid #ccc;
}
.vertical-nav li {
text-align: center;
border-bottom: 1px solid #ddd;
}
.vertical-nav li a {
display: block;
color: #333;
padding: 12px 16px;
text-decoration: none;
font-family: Arial, sans-serif;
}
.vertical-nav li a:hover {
background-color: #555;
color: white;
}
.vertical-nav li a.active {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<ul class="vertical-nav">
<li><a href="#home">Home</a></li>
<li><a href="#products" class="active">Products</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</body>
</html>
A vertical navigation menu appears with centered text links. The "Products" link is highlighted in green.
Conclusion
Flexbox with justify-content: center is the most flexible and reliable method for centering navigation links. It works in all modern browsers and doesn't require fixed widths, making it perfect for responsive designs.
4K+ Views
