如何更好地将导航中的搜索栏垂直居中

Question

我尝试了很多方法，但似乎无法移动我的搜索栏(除了左边的空白：40px；，这很好。然而，底部的空白是我无法移动的。(。我已经查看了以前的问题，但没有找到解决方案。搜索栏似乎附在导航栏的底部。我想知道我是否有一个重叠的规则或是什么东西阻止了它的移动。

此外，你们中有人看到我可以改进现有代码的方法吗？(即，如果我正在以艰难的方式做某事，而有更容易的方式，等等。(任何想法和/或解决方案都将不胜感激。

HTML:

<nav>
<ul>
<li class="logo"><a href="#"><span class="redtxt">FIT</span><span class="blktxt">ERACY</span></a></li>
<li>
<form action="./" method="get">
<div class="searchbar">
<input type="text" class="searchbar__input" name="search" placeholder="Search Programs">
<button type="submit" class="searchbar__button">
<i class="material-icons">search</i>
</button>
</div>
</form>
</li>
<li class="list"><a href="#">Signup</a></li>
<li class="list"><a href="#">Login</a></li>
<li class="list"><a href="#"><i class="fas fa-shopping-cart"></i></a></li>
<li class="list"><a href="#">Contact</a></li>
<li class="list"><a href="#">Become an Instructor</a></li>
<li class="list"><a href="#">Categories</a></li>
</ul>
</nav>

CSS：

@import url('https://fonts.googleapis.com/css2?family=Crushed&display=swap');
* {
margin: 0;
padding: 0;
}
nav {
width: 100%;
height: 75px;
background-color: rgb(104, 103, 115);
position: fixed;
}
ul li {
font-family: 'Crushed', cursive;
text-transform: uppercase;
display: inline-block;
}
ul li a {
text-decoration: none;
color: white;
}
.searchbar {
display: flex;
margin-left: 40px;
}
.searchbar__input {
width: 400px;
height: 30px;
}
.list {
float: right;
margin: 20px;
padding-top: 8px;
font-size: 20px
}
.list a:hover {
color: rgb(103, 30, 30);
}
.logo {
font-size: 45px;
margin-left: 13px;
text-align: center;
padding-top: 12px;
}
.redtxt {
color: rgb(103, 30, 30);
}
.blktxt {
color: black;
}

谢谢！

Answer 1

ul {
display: flex;
flex-direction: row;
align-items: center;
}

这应该使标签中的所有内容垂直居中。您需要处理或删除添加到徽标和菜单项的某些填充/边距值。