How to properly align items to vertical center in bootstrap menu?

Question

css

Hello! There is a classic menu with a brand logo on bootstrap. Fiddle For the current size of the logo image - the size by design should be 88px. How to make it so that, regardless of the size of the logo, it is aligned with the menu in the vertical center every time (with similar indents) and at the same time be cross-browser ie9+ ? The use of padding, marging, line-height, position:absolute in this case is bad form. I tried wrapping with a combination of table table-cell vervical-align middle , but for some reason it doesn't work.. How to be?

.navbar {
  height: 88px;
}

<div class="navbar navbar-inverse">
  <div class="container">
    <!-- Header -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
        <img src="http://placehold.it/66x61">Bootstrap 3 Skeleton
      </a>
    </div>
    <!-- Navbar Links -->
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a>
        </li>
        <li><a href="#about">About</a>
        </li>
        <li><a href="#contact">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 1

Okay, I'll save you
jsfiddle.net/kcpma/793

Answer 2

flex