Center li of nav bar vertically [duplicate] - html

Question

This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 10 months ago.
As you can see the menu points are not centered vertically like the social media points, could someone please tell me how to do that, it's the first page I am working on. I would also like to scale down the space between the social media links, would be very grateful if someone could help me!
.menu-link {
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 22px;
color: #262a2b;
text-decoration: none;
height: 45px;
}
#social-media {
width: 100px;
height: 100px;
margin: 0;
padding: 0;
}
.menu-link:hover {
color: #0088a9;
}
.active-menu-links {
color: white;
}
#normal-header {
position: fixed;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 100%;
margin: auto;
font-size: 19px;
min-height: 100px;
}
#header-img {
height: 110px;
padding-top: 20%;
padding-bottom: 20%;
margin-left: 20%;
}
#nav-bar {}
#nav-bar ul {
list-style: none;
display: flex;
flex-flow: row;
}
#nav-bar li {
padding: 10px;
margin: 12px;
}
#nav-bar ul,
a {
text-decoration: none;
}
<nav id="nav-bar">
<ul>
<li class="nav-link" id="menu-item"> Home </li>
<li class="nav-link" id="menu-item"> About </li>
<li class="nav-link" id="menu-item"> Roadmap </li>
<li class="nav-link" id="menu-item"> Ecosystem </li>
<li class="nav-link" id="menu-item"> Team
<li>
<li>
<a class="nav-link" href="xxx"><img id="social-media" src="xxx" alt="Instagram"></a>
</li>
<li>
<a class="nav-link" href="xxx"><img id="social-media" src="xxx" alt="Twitter"></a>
</li>
<li>
<a class="nav-link" href="xxx"><img id="social-media" src="xxx" alt="Discord"></a>
</li>
-->
</ul>
</nav>
I hope someone can help me. Thanks in advance!

Answer 1

So, I can't identify your problem because the snippet not working well as missing of files
But you can try to add align-items: center; to the #nav-bar ul selector
Or you can add display: flex align-items: center; to the #nav-bar li

Answer 2

You have several options:
Set line-height property of li or li a to the overall height
Set vertical-align: middle; (this doesn't always work for me)
Use paddings and margins (not recommended)
Set display: flex; and align-items: center to your li tag, but it can potentially break your layout

Answer 3

Since you made a snippet I tried and yes, you need line-height.✌️
To explain: If you use line-height with the same height as it's element. The two will match and make a easy menu button. Some side padding and/or margin, and you are done.
.menu-link {
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 22px;
color: #262a2b;
text-decoration: none;
height: 45px;
line-height: 45px;
}
#social-media {
width: 100px;
height: 100px;
margin: 0;
padding: 0;
}
.menu-link:hover {
color: #0088a9;
}
.active-menu-links {
color: white;
}
#normal-header {
position: fixed;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 100%;
margin: auto;
font-size: 19px;
min-height: 100px;
}
#header-img {
height: 110px;
padding-top: 20%;
padding-bottom: 20%;
margin-left: 20%;
}
#nav-bar {}
#nav-bar ul {
list-style: none;
display: flex;
flex-flow: row;
}
#nav-bar li {
padding: 10px;
margin: 12px;
}
#nav-bar ul,
a {
text-decoration: none;
}
<nav id="nav-bar">
<ul>
<li class="nav-link" id="menu-item"> Home </li>
<li class="nav-link" id="menu-item"> About </li>
<li class="nav-link" id="menu-item"> Roadmap </li>
<li class="nav-link" id="menu-item"> Ecosystem </li>
<li class="nav-link" id="menu-item"> Team
<li>
<li>
<a class="nav-link" href="xxx"><img id="social-media" src="xxx" alt="Instagram"></a>
</li>
<li>
<a class="nav-link" href="xxx"><img id="social-media" src="xxx" alt="Twitter"></a>
</li>
<li>
<a class="nav-link" href="xxx"><img id="social-media" src="xxx" alt="Discord"></a>
</li>
-->
</ul>
</nav>