在包含标志的导航栏中垂直对齐文本

Question

我的导航栏中的标志左对齐，链接右对齐，但链接在导航栏内垂直方向上并不居中。无论我做什么都无法使其居中。感谢您提前的任何帮助。以下是我的代码：

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;
}

- mmmchikenfingers

---

你能提供一段代码片段吗？不仅仅是CSS和HTML，我们需要手动复制才能检查它。 - Vlad DX

谢谢Potashin。我从现在开始会这样做的。 - mmmchikenfingers

我不太明白你希望布局是什么样子的，是像这个吗？ - Antonio Smoljan

Antonio Smoljan，是的，它现在看起来有些相似，但徽标已经很好地居中，链接坐落在导航栏的顶部，而不是垂直居中。 - mmmchikenfingers

kfreeman04208，不，我想要链接水平显示，但垂直居中。 - mmmchikenfingers

Answer 1

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

只需在您的CSS中更改此内容即可。

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

- Nenad Vracar

---

谢谢！成功了！我给你一个吻！ - mmmchikenfingers

Answer 2

我使用 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's 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))
});

元素和类需要具有相同的高度，因此您应该在一个地方同时设置它们：

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

我还想指出的是，在小屏幕上查看网页时，布局会因为文本自动换行而破坏。为解决此问题，建议使用flexbox。唯一的缺点就是它们还比较新，并且仍存在一些错误。

希望这可以帮到您！

- Maxwell Duzen

---

谢谢你的帮助，但 Nenad Vracar 已经为我解决了这个问题。 我正在我的 Web 开发的第一个学期，还不熟悉 JQuery，只了解 html5 和 css3。谢谢！ - mmmchikenfingers

Answer 3

好的，看看这个是否符合您的需求。只需将其添加到您的CSS中即可。

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

- user5125729

---

它可以在Firefox和IE上运行，你用什么来显示页面？你想让它们居中在div的中间，是吗？ - user5125729

我正在使用Firefox，刚刚在IE中尝试了一下，但那里也不起作用。是的，我只想在右侧垂直居中。 - mmmchikenfingers

我认为你需要仔细检查你的代码，因为它在这里可以运行。https://jsfiddle.net/s27vk2sw/ - user5125729