Image not Vertical Aligned

.topnavigatiebar {
  width: 1500px;
  height: 100px;
  background-color: #fafafa;
  position: fixed;
  top: 0;
  overflow: hidden;
  z-index: 9;
  white-space: nowrap;
}

.topnavigatiebar img {
  float: left;
}

.topnavigatiebar #nav {
  width: 80%;
  height: 50%;
  margin-top: 25px;
  margin-left: 20px;
  float: left;
  display: block;
  text-decoration: none;
  text-align: center;
}

.topnavigatiebar #nav #sector {
  width: auto;
  height: 75%;
  float: left;
  margin: 0 15px 0 15px;
  padding: 5px 10px 5px 10px;
  border-radius: 6px;
}

.topnavigatiebar #nav #sector:hover {
  background-color: lightgrey;
  transition: 0.25s;
}

.topnavigatiebar #nav .active {
  background-color: #b7a483;
}

.topnavigatiebar #nav:visited {
  color: black;
}

.topnavigatiebar #nav #sector a {
  font-size: 20px;
  vertical-align: center;
  line-height: 40px;
  text-decoration: none;
  color: inherit;
}

#logo {
  display: inline-block;
  margin-top: auto;
  height: 100%;
  vertical-align: middle;
}

#logo img {
  background: #3A6F9A;
  vertical-align: middle;
  max-height: 100px;
  max-width: 100px;
  border-radius: 45px;
}

.right {
  float: right;
}

<div class="topnavigatiebar">
  <a href="website.php"><img src="https://i.sstatic.net/6gErq.jpg"></a>
  <div id="nav">
    <div id="sector"><a href="website.php">Home</a></div>
    <div id="sector" class="active"><a href="website.php">KlantenInformatie</a></div>
    <div id="sector"><a href="website.php">Artikelen</a></div>
    <div id="sector"><a href="website.php">Instellingen</a></div>
    <div class="right">
      <div id="sector"><a href="website.php">Afmelden</a></div>
    </div>
  </div>
  <div id="logo"><img src="../Includes/Pictures/ProfielLogo.png"></div>
</div>

So i couldn't find a specific answer to my question, but something in my html is going wrong.

i try to vertical align a image to the center of a navigation bar. the image is for profile pictures, so you can see who is logged in (the login config isn't there yet, but that is for later).

Can anyone look at my code and tell me what i am doing wrong?

It just might be very simple and me stupid enough to forget, but i just can't figure out?

i already tried these methods, but they didn't solve my problem:

How to vertically align an image inside a div?

facebook photo/ image vertical align?

vertical-align image in div

EDIT: here are 2 links for the pictures:

https://i.sstatic.net/6gErq.jpg

Solution

Try adding margin-top: 20% in the #logo img in CSS.

You can also do the same by adding display: block; margin-top: 25%; in #logo img in CSS as well.