CSS Center Navbar Elements [duplicate] - html

Question

This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 2 years ago.
I know that this is probably asked many times already. I just want to center all items of my navbar vertically. I tried to set vertical-align: center; in my headercss tag.
I probably miss something:
<header>
<nav class="navbar">
<div class="branding">
<img src="pic/branding.png" alt="branding">
</div>
<div class="navbar-links">
<ul>
<li>Login </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">
<img src="pic/branding.png" alt="branding">
</div>
<div class="navbar-links">
<ul>
<li>Login </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>