CSS中心导航栏元素[重复]

Question

此问题已经在这里有了答案：

How to vertically center a div for all browsers?（45个答案）

关闭2分钟前。

我知道这可能已经被问过很多遍了。我只想将导航栏的所有项目垂直居中。我试图在vertical-align: center; css标签中设置header。我可能会错过一些东西：

<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

要使项目在导航栏上居中，请使用以下CSS声明：

.navbar {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

也请尝试远离float属性。他们倾向于使事情复杂化。因此，可以使用float: left代替justify-self: flex-start，对于float: right，请使用justify-self: flex-end。

我知道还不太清楚，如果您需要进一步的解释，请告诉我。