Align text in navigation bar vertically including logo

Question

The logo in my navigator is aligned to the left, and the links inside are aligned to the right, but the links sit vertically inside the navigation panel. No matter what I do, I cannot reach the center. Thank you in advance for any help. Here is my code:

HTML

  <div class="navbar-fixed">
    <nav>
      <div class="nav-wrapper">
        <ul>

        <a href = "index.html" class = "nav-logo"><img src="images/mo's_logo.png" title = "Go to Mo Gyros Home" alt = "Mo Gyros logo"></a>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href = "#">Specials</a></li>
          <li><a href = "#">Events</a></li>
        <li><a href = "#">Contact Us</a></li>
        </ul>
      </div> <!-- end of nav-wrapper -->
    </nav>
  </div> <!-- end of navbar-fixed -->

CSS

#nav-wrapper {
}

nav { 
        width: 100%;
        height: 38px;
        padding: 5px;
        position: fixed;
        background-color: #5c5453;
}

.navbar-fixed {
        padding: 0;
}

.nav-logo {
        float: left;
        padding-left: 160px;
}

nav li { 
        display: inline;
        list-style-type: none;
        padding-right: 50px;
}

a { 
        color: #8CBAD9;
        text-decoration: none; 
}

a:hover { 
        color: white;
        text-decoration: underline;
}

ul {
    text-align: right;
}

Answer 1

Try https://jsfiddle.net/vb8yspjs/1/

Just change it in your CSS

ul {
  text-align: right;
  margin: 0;
  line-height: 38px;
}

Answer 2

I was able to vertically center the text using jQuery:

//Get the DOM objects
w = $('.nav-wrapper');
wa = $('.nav-wrapper a');
wimg = $('.nav-wrapper a img');

//Set the nav wrapper to half its own height minus half of the link text
w.css({
    'padding-top': (w.height() / 2) - (wa.height() / 2)
});

//Remove offset from image
wimg.css({
    'margin-top': -((w.height() / 2) - (wa.height() / 2))
});

Both the nav element and the nav-wrapper class should be the same height, so you should set them in one place:

.nav-wrapper, nav {
    height: 38px;
}

, , . , flexboxes. , - .

, !

Answer 3

OK, see if this works for what you are looking for. Just add it to your CSS

nav li { 
    display: inline;
    list-style-type: none;
    padding-right: 50px;
    position:relative;
    bottom: 5px;
}