CSS 居中导航栏元素

Question

我知道这可能已经被问过很多次了。我只想将导航栏的所有项目垂直居中。我试图在我的 headercss 标签中设置 vertical-align: center;。我可能错过了什么：

<header>
            <nav class="navbar">

                <div class="branding"> 
                    <a href="index.html"> <img src="pic/branding.png" alt="branding"></a>
                </div>

                <div class="navbar-links">
                    <ul>
                        <li><a href="de/login.html">Login</a> </li>
                    </ul>          
                </div>

                <div class="searchbox-container">
                    <input class="searchbar" type="text" placeholder="Search...">
                    <button class="search-button" type="submit"><img src="pic/searchicon.png" height="25px" width="25px" alt="search"></button>
                </div>

            </nav>

        </header>

css:

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
}

body{
    font-family: sans-serif;
}

/* Navbar stuff */
header{
    background-color: #424242/*#80aaff*/;
    height: 60px;
}

.navbar{
    width: 80%;
    margin: auto;
}

.branding{
    float: left;
}

.navbar-links{
    float: right;
}

.navbar-links ul{
    list-style: none;
}

.navbar-links ul li a{
    text-decoration: none;
    text-transform: uppercase;
    color: white;
}

Answer 1

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
}

body {
  font-family: sans-serif;
}


/* Navbar stuff */

header {
  background-color: #424242/*#80aaff*/
  ;
  height: 60px;
  display: flex;
  align-items: center;
}

.navbar {
  width: 80%;
  margin: auto;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

.branding {
  margin-right:
}

.navbar-links {
  margin-left: auto;
}

.navbar-links ul {
  list-style: none;
}

.navbar-links ul li a {
  text-decoration: none;
  text-transform: uppercase;
  color: white;
}

<header>
  <nav class="navbar">
    <div class="branding">
      <a href="index.html"> <img src="pic/branding.png" alt="branding"></a>
    </div>
    <div class="navbar-links">
      <ul>
        <li><a href="de/login.html">Login</a> </li>
      </ul>
      <div>
        <div class="searchbox-container">
          <input class="searchbar" type="text" placeholder="Search...">
          <button class="search-button" type="submit"><img src="pic/searchicon.png" height="25px" width="25px" alt="search"></button>
        </div>
      </div>
    </div>
  </nav>
</header>

CSS 居中导航栏元素

CSS Center Navbar Elements

html

css

vertical-alignment

navbar