Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Center links in a Navigation Bar with CSS
One of the most crucial components of the website or application is the navbar. It usually sits at the top of your application and makes it simple for users to go to the most important areas or pages of your website or app.
The major sections of your website are essentially linked from a navbar. These links are commonly known as navigation items, and you can choose to align them to the left, center, or right.
Centering the Navigation Bar
Depending on the HTML and CSS that you have already used to create it, centering the navbar might be both simple and complex. For example, applying text-align: center; on the <nav>, will automatically align the nav items to the center if you haven't used the float property over them. Though, applying text-align: center; to the <nav> will not center them if you have already used the float property.
Margin: auto; is an additional way that might work, but it only functions if the navbar has a fixed width, which is something you should always avoid.
With all of these considerations in mind, I have found a practical approach that, will work in every situation, irrespective of the CSS you have already used. Using the CSS Flexbox module is the solution.You can make responsive webpages without using the float and position properties by utilizing the CSS flexbox module, which is a flexible layout module.
A navbar needs to be made into a flex container by applying display: flex; in order to be centered using CSS flexbox. The nav elements can then be aligned to the left, middle, or right using the justify-content property.
Example
Let's look at the following example, where we are going to use the margin:auto to center navigation bar with fixed width 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>
When we run the above code, it will generate an output consisting of the navigation bar at the center of the webpage.
Example
Considering another scenario, where we are going to use justify-content:center to align the navigation bar at 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>
On running the above code, the output window will pop up, displaying the navigation bar at the center of the webpage.
Example
In the following example, we are going to use text-align:center to center the navigation bar.
<!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>
When we run the above code, the output window will pop up, displaying the navigation bar at the center of the webpage.
1K+ Views
