How to create a navigation bar with centered logo/link?
The navigation bar is added to the webpage to navigate between the pages of the websites. The navbar consists of a list of horizontal links, logos, etc. The link or logos can be aligned left, right, or center with CSS. Here, we will learn to align the link and logo to the center of the navigation bar.
A navigation bar with centered link and logo
We normally use float: left and float: right to align the navbar elements to left or right respectively. But float does not provide a value to the center element within the navbar. So to center align the navbar element first of all change the display property of the navbar to display: flex and the use justify-content: center.
Example: Center align the link within the navbar
Here is an example of the navigation bar with the centered link.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML </title>
<style>
/* Add a black background color to the top navigation */
.navbar {
background-color: #CCCCCC;
overflow: hidden;
display: flex;
justify-content:center;
}
/* Style the links inside the navigation bar */
.navbar a {
color: #f1f2f3;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 18px;
}
/* Change the color of links on hover */
.navbar a:hover {
background-color: #d34567;
color: black;
}
/* Add a color to the active/current link */
.navbar a.active {
background-color: #d43565;
color: white;
}
</style>
</head>
<body>
<div class="navbar">
<a class="active" href="#">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
<h2> Here we have successfully added a navbar </h2>
</body>
</html>
Output
Here is the output of the above example.
Example: Center align the link and logo within the navbar
Here, we have added a logo to the navbar using <img>. The logo will be also aligned to the center with the links.
Conclusion
In this tutorial, we have aligned the links and logo to the center of the navbar. The justify-content: center can be used to do so. We have explained it with simple examples.
