Center li of nav bar vertically

Question

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"><a href="#hero-header" class="menu-link"> Home </a></li>
    <li class="nav-link" id="menu-item"><a href="#features-container" class="menu-link"> About </a></li>
    <li class="nav-link" id="menu-item"><a href="#presentation-container" class="menu-link"> Roadmap </a></li>
    <li class="nav-link" id="menu-item"><a href="#main-media-container" class="menu-link"> Ecosystem </a></li>
    <li class="nav-link" id="menu-item"><a href="#prices-section-container" class="menu-link"> Team </a>
      <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!

if you put a border on .#nav-bar {} you'll see the contents aligned vertically (by the way) .. I mean in your snippet. I was editing your question before to add a snippet instead of static code and while spending time to better format your html I did that try and canceled my revision because I didn't want to change any detail of your question — Diego D, Apr 23 '22 at 19:41

score 0 · Answer 1 · answered Apr 23 '22 at 19:43

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

Kip · Answer 2 · 2022-04-23T19:56:44.667

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"><a href="#hero-header" class="menu-link"> Home </a></li>
    <li class="nav-link" id="menu-item"><a href="#features-container" class="menu-link"> About </a></li>
    <li class="nav-link" id="menu-item"><a href="#presentation-container" class="menu-link"> Roadmap </a></li>
    <li class="nav-link" id="menu-item"><a href="#main-media-container" class="menu-link"> Ecosystem </a></li>
    <li class="nav-link" id="menu-item"><a href="#prices-section-container" class="menu-link"> Team </a>
      <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 wonder how it did change respect to the original one because they look the same — Diego D, Apr 23 '22 at 19:44
that's not a valid comment frankly. I was telling you that if you run the original snippet, it already looked correctly aligned vertically so any modification was not needed unless you explain why line-height would change anything if any condition would change in the contents. This race for getting the answer done is very annoying because it doesn't address the real problem and makes people say things without even checking — Diego D, Apr 23 '22 at 19:56
you can’t tell me that I didn’t look good enough if I’m telling you that the final result looks the same. YOU didn’t look good enough not me. I know very well how styling works but surely your answer before was not explaining anything but just saying that your snippet now looked good compared to the original. But the original already looked good. yes you had to explain because that’s how SO is supposed to work. You say you checked but again it seems like you never checked the original — Diego D, Apr 23 '22 at 20:21
I did.. even after you comment I triple checked. Open my snippet.. run.. hold your fingernail under the font.. remove line-height.. and run again. — Kip, Apr 23 '22 at 20:28
I give you a suggestion… remove line-height and add border to the navmap. you’ll see it’s already aligned vertically. so not only you didn’t produce a better solution for the case shown in the snippet but you even made the height higher probably. I’m being repeating this ten times since the first comment on the original question: in the original snippet the alignment its correct. nothing more. now I hope you understand what I’m trying to tell you. I’m not blaming for the sake of nothing. I had good reasons — Diego D, Apr 23 '22 at 20:33

score 0 · Accepted Answer · answered Apr 23 '22 at 19:45

0

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

answered Apr 23 '22 at 19:45

Philo

428
4
11

Center li of nav bar vertically

3 Answers3