如何在导航栏中垂直居中显示div

Question

我的问题很简单，我如何能够垂直中心div在我的导航栏，所以他们将始终在中心，无论我设置的导航栏的高度。我已经尝试过vertical-align: middle;，但那对我不起作用。

HTML:

<div class="navbar">
<div class="buttons">
<button class="homeButton"><i class="fas fa-home"></i></button>
<button class="schoolButton"><i class="fas fa-graduation-cap"></i>mySchool</button>
</div>
<div class="links">
<a href="#">Programování</a>
<a href="#">Anglický jazyk</a>
<a href="#">Psychologie</a>
<a href="#">Zdraví a psychohygiena</a>
<a href="#">Matematika</a>
<a href="#">Logické úlohy</a>
<a href="#">Programy</a>
<a href="#">Ostatní</a>
</div>
</div>

CSS:

.navbar {
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 0px 0px 10px 10px;
width: 100%;
height: 100px;
font-family: Open Sans;
background: white;
position: fixed;
}
.buttons {
float: left;
}
.links {
float: right;
}

Answer 1

使用float是一个不推荐的解决方案，最好这样做:

.navbar {
display: flex;
justify-content: center;
align-items: center;
}

Answer 2

你可以试着把项目放在div的中间，例如

.verticalCenter {
top: 50%;
}

然后把它添加到按钮的div。

<div class="buttons verticalCenter"> <!-- added here -->
<button class="homeButton"><i class="fas fa-home"></i></button>
<button class="schoolButton"><i class="fas fa-graduation-cap"></i>mySchool</button>
</div>

Answer 3

你可以使用flexbox

.navbar {
/*rest of your code*/
display: flex;
justify-content: center;
align-items: center; 
}