列表没有在flex中的导航栏中垂直居中对齐

Question

我不是flex的新手，但我无法将导航栏的内容垂直对齐到代码的中心。

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

我的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;
}

我还将引导程序导入到项目中。

任何帮助都将不胜感激！！！非常感谢。

Answer 1

如果使用react，请将class替换为className。

.nav{
display: flex;
flex:1;
justify-content: center;
align-items: center;
min-height: 10vh;
background: rgb(250, 172, 3);
color: aliceblue;
}
.nav-link1{
width: 50%;
display: flex;
flex-direction:row;
justify-content:space-between;
align-items: center;
list-style: none;
}

<nav class="nav">
<h3> Logo </h3>
<ul class= "nav-link1">
<li class="nav-item1 ">
<Link to="/">Home</Link>
</li>
<li class="nav-item1 ">
<Link to="/button">Button</Link>
</li>
<li class="nav-item1 ">
<Link to="/text">Text</Link>
</li>
</ul>
</nav>

Answer 2

在bootstrap中，ul元素有一个填充底部。将margin-bottom: 0添加到.nav-link1类中，它将垂直对齐。