how to create w3-bar content with equal height

Currently I am trying to use the newly added w3-bar class from w3.css to create a top navigation with some buttons and a logo.

If the navigation bar only consists of buttons, everything works fine, since the height of the buttons is the same everywhere.

Now when I try to add a logo to that navigation bar which is higher than the buttons, then the buttons are placed to the top of the bar.

<div class="w3-border w3-light-grey w3-bar" style="height: 80px">
    <a class="w3-bar-item w3-button" href="#">Home</a>
    <img class="w3-bar-item" src="http://lorempixel.com/200/56/">
    <a class="w3-bar-item w3-button" href="#">Link 1</a>
    <a class="w3-bar-item w3-button" href="#">Link 2</a>
    <a class="w3-bar-item w3-button w3-green w3-right" href="#">Link 3</a>
</div>

I would like to manage it to place the buttons in the vertical middle position so it looks way better.

I can manage this vertically centered buttons when i use w3-cell-row and w3-cell-middle like so:

<div class="w3-border w3-light-grey w3-cell-row" style="height: 80px">
    <a class="w3-cell w3-cell-middle w3-button" href="#">Home</a>
    <img class="w3-cell w3-cell-middle " src="http://lorempixel.com/200/56/">
    <a class="w3-cell w3-cell-middle  w3-button" href="#">Link 1</a>
    <a class="w3-cell w3-cell-middle  w3-button" href="#">Link 2</a>
    <a class="w3-cell w3-cell-middle  w3-button w3-green w3-right" href="#">Link 3</a>
</div>

But if i try to vertically center the buttons in the w3-bar navigation bar, i can't get it to work.

You can check this fiddle to see the two different results:

https://jsfiddle.net/TheChaos/o1cg5e64/

Does anybody know how to vertically center (and fill the navbar) completely with w3.css classes (or some additional css)?

Solution

i'm adding another answer as i believe the first answer to still be helpful for some readers.

https://jsfiddle.net/showcaseimagery/8r9bmgm3/

the .w3-bar-item of this CSS will do it, i've added the other two styles for optionals

.w3-bar-item {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

#brand {
  display: block !important;
  padding: 0 !important;
}

img#brand {
  height: 100%;
  width: auto;
}

with the only alteration to the html as #brand