html - How do I stretch the height of an element using CSS?

Question

In my website I have made a nav bar with a picture on the left. I now have the problem that the text elements are at the bottom of the nav bar instead of stretched across it. Anyone know how I can solve it without changing the padding? e.g. by setting a dynamic padding or such?

.navbar {
  background-color: #e7e7e7;
}

.navbar-element {
  display: inline-block;
  color: #202020;
  padding: 10px;
  text-decoration: none;
}

.navbar-element:hover {
  color: #000000;
  background-color: #d0d0d0;
}

.navbar-element.active {
  color: #f0f0f0;
  background-color: #006000;
}

.navbar-element.active:hover {
  color: #ffffff;
  background-color: #007000;
}

<nav class="navbar">
  <a class="navbar-element" href="."><img class="logo-navbar" src="./img/logo-black.svg"></a>
  <a class="navbar-element active" href=".">Startseite</a>
  <a class="navbar-element" href="./about-us">über uns</a>
  <a class="navbar-element" href="./shop">Shop</a>
</nav>

question from:https://stackoverflow.com/questions/65922219/how-do-i-stretch-the-height-of-an-element-using-css

Answer 1

I can propose you this (for the logo, I add one and I give a size, but check this proposition with your own logo):

img{
  height: 50px; /*ADD*/
}

.navbar {
  background-color: #e7e7e7;
  display: flex; /*ADD*/
  align-items: center; /*ADD*/
}

.navbar-element {
  /*display: inline-block;*/
  color: #202020;
  padding: 10px;
  text-decoration: none;
}

.navbar-element:hover {
  color: #000000;
  background-color: #d0d0d0;
}

.navbar-element.active {
  color: #f0f0f0;
  background-color: #006000;
}

.navbar-element.active:hover {
  color: #ffffff;
  background-color: #007000;
}

<nav class="navbar">
  <a class="navbar-element" href="."><img class="logo-navbar" src="http://www.bardfieldacademy.org/wp-content/uploads/2016/08/00106-3D-company-logos-design-free-logo-online-02.png"></a>
  <a class="navbar-element active" href=".">Startseite</a>
  <a class="navbar-element" href="./about-us">über uns</a>
  <a class="navbar-element" href="./shop">Shop</a>
</nav>