NAV栏的中心垂直
您可以看到菜单点不像社交媒体点那样垂直居中，有人可以告诉我如何做，这是我正在研究的第一页。我还想缩小社交媒体链接之间的空间，如果有人可以帮助我，将非常感激！
.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>我希望有人可以帮助我。提前致谢！
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!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
因此，我无法识别您的问题，因为该片段无法很好地工作，因为缺少文件
，但是您可以尝试将
Align-Items：Center;添加到＃＃NAV-BAR UL 选择器或您可以添加
显示：flexalign-items：center;to＃＃＃nav-bar liSo, 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 ulselectorOr you can add
display: flexalign-items: center;to the#nav-bar li您有几个选项：
line-heightli的属性或li a到整体高度vertical-align：middle;（这并不总是对我有用）display：flex;andalign-items：中心to your <代码> li 标签，但它可能会破坏您的布局You have several options:
line-heightproperty ofliorli ato the overall heightvertical-align: middle;(this doesn't always work for me)display: flex;andalign-items: centerto yourlitag, but it can potentially break your layout由于您制作了一个片段，所以我尝试过，是的，您需要线路高度。✌️
可以解释：如果使用与元素相同高度的线路高度。两者将匹配并制作一个简单的菜单按钮。一些侧填充和/或边距，您完成了。
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.