导航栏垂直居中 li

Question

如您所见，菜单点不像社交媒体点那样垂直居中，谁能告诉我该怎么做，这是我正在处理的第一页。我也想缩小社交媒体链接之间的space，如果有人能帮助我，将不胜感激！

.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>

希望有人能帮助我。提前致谢！

Answer 1

您有多种选择：

将li或li a的line-height属性设置为整体高度
设置vertical-align: middle;（这并不总是适合我）
使用填充和边距（不推荐）
将 display: flex; 和 align-items: center 设置为您的 li 标签，但它可能会破坏您的布局

Answer 2

因为你做了一个片段，我试过了，是的，你需要 line-height。✌️

解释一下：如果你用line-height和它的元素一样高。两者将匹配并制作一个简单的菜单按钮。一些侧填充 and/or 边距，你就完成了。

.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>

Answer 3

所以，我无法确定您的问题，因为该代码段因文件丢失而无法正常工作

但您可以尝试将 align-items: center; 添加到 #nav-bar ul 选择器

或者您可以将 display: flex align-items: center; 添加到 #nav-bar li

导航栏垂直居中 li

Center li of nav bar vertically

html

css

nav

centering