How can I better get my searchbar within my nav to vertically center?-CodePudding

I have tried a lot of things and cannot seem to get the searchbar within my to move (With the exception of the margin-left: 40px;, that works just fine. However the bottom margin is what I can't get to move.). I have looked through previous questions and not found a solution. The searchbar seems attached at the bottom of the navbar. I am wondering if I have an overlapping rule or something that is preventing it from moving.

Additionally, do any of you see any ways I can improve on the code that I have already? (i.e. if I am doing something the hard way and there is an easier way, etc..) Any ideas and/or solutions would be much appreciated.

HTML:

<nav>
    <ul>
      <li ><a href="#"><span >FIT</span><span >ERACY</span></a></li>
      <li>
        <form action="./" method="get">
          <div >
            <input type="text"  name="search" placeholder="Search Programs">
            <button type="submit" >
              <i >search</i>
            </button>
          </div>
        </form>
      </li>
      <li ><a href="#">Signup</a></li>
      <li ><a href="#">Login</a></li>
      <li ><a href="#"><i ></i></a></li>
      <li ><a href="#">Contact</a></li>
      <li ><a href="#">Become an Instructor</a></li>
      <li ><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;
}

Thanks!

CodePudding user response：

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

That should center everything vertically in the tag. You will need to play around with or remove certain padding/margin values that you have added to the logo and menu items.