* {
padding : 0;
margin : 0;
}
nav {
padding : 20px;
background-color : #809906;
list-style : none;
border-bottom : 2px solid black;
}
a {
color : black;
padding-right : 115px;
}
a:hover {
color : hotpink;
}
<script src="https://kit.fontawesome.com/b75e3e30ff.js" crossorigin="anonymous"></script>
<nav>
<a href="#" style="padding-left: 5px;"><i class="fa-solid fa-bars"></i></a>
<a href="#"><i class="fa-solid fa-house"></i></a>
<a href="#"><i class="fa-solid fa-user"></i></a>
<a href="#"><i class="fa-solid fa-magnifying-glass"></i></a>
<a href="#"><i class="fa-solid fa-cart-shopping"></i></a>
</nav>
I tried various methods like flexbox to center the icons in navbar but it didn’t work. I am trying to position all the icons to the center of the navbar. I am new in this filed.
2
Answers
Flexbox is perfect for nav bars.
Set the Navbar to Use Flexbox:
Use display: flex to make the a flex container.
Use justify-content: center to center the flex items (the icons) horizontally.
Adjust Padding and Margin:
Adjust the padding and margin for the elements as needed to ensure they are evenly spaced.