html - 垂直对齐导航栏中包含 Logo 的文本

Question

我的导航栏中的 Logo 左对齐，中的链接右对齐，但链接在导航栏中垂直居中。无论我做什么，我都无法让它居中。在此先感谢您的帮助。这是我的代码:

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's Gyros Home" alt = "Mo's 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

试试这个 https://jsfiddle.net/vb8yspjs/1/

只需在您的 CSS 中更改它

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