I've been working with flex for a while now, but I'm struggling to vertically align the content of my navbar to the center in the code.
<nav className="nav navbar">
<h3> Logo </h3>
<ul className= "nav-link1">
<li className="nav-item1 ">
<Link to="/">Home</Link>
</li>
<li className="nav-item1 ">
<Link to="/button">Button</Link>
</li>
<li className="nav-item1 ">
<Link to="/text">Text</Link>
</li>
</ul>
</nav>
and here is the corresponding CSS:
.nav{
display: flex;
justify-content: center;
align-items: center;
min-height: 10vh;
background: rgb(250, 172, 3);
color: aliceblue;
}
.nav-link1{
width: 50%;
display: flex;
justify-content:space-between;
align-items: center;
list-style: none;
}
I also have Bootstrap imported into this project.
Any assistance on this matter would be greatly appreciated. Thank you!