与 CSS/HTML 的父 div 对齐

Question

我正在为我好友的乐队做一个小项目，最近切换到一个新的导航栏。它的布局方式是徽标位于中心，页面链接位于其左侧/右侧。到目前为止，这工作正常，但我想在右侧添加一些文本或图像，但无法弄清楚如何做到这一点，因为导航栏设置为居中所有内容。此处图像中显示的示例：https://i.stack.imgur.com/nqB4h.jpg

请记住，此导航栏始终位于屏幕顶部。

这是它目前的样子，不得不使用 span2 来

.CSS：

.fixed-nav-bar {
      position: fixed;
      top: 0;
      z-index: 9999;
      width: 100%;
      height: 100px;
      background-color: #000;
      display: table;
}
span2 {
      display: table-cell;
      vertical-align: middle;
      position: relative;
    }

.HTML：

<nav class="fixed-nav-bar">
<style>
ul {
    list-style-type: none;
    overflow: hidden;
    background-color:000;
}
li {
    display: inline-block;
}
li a {
    display: inline-block;
    color: white;
    padding: 14px 16px;
    text-decoration: none;
}
li a:hover {
    background-color: #111;
}
</style><span2>
<ul><center>
  <li><a class="active" href="#Home">Home</a></li>
  <li><a href="#About">About</a></li>
  <li><a href="#Video">Video</a></li>
  <li><img src="http://i.imgur.com/8Iu55Ho.png"></li>
  <li><a href="#Music">Music</a></li>
  <li><a href="#Press">Press</a></li>
  <li><a href="#Contact">Contact</a></li></center>
</ul></span2>
</nav>

任何帮助将不胜感激！

Answer 1

如果您希望

您的ul保持在页面中心，我认为您必须对右侧的文本使用position: absolute，以便它退出元素流。所以它应该看起来像这样

nav {
  position: fixed;
  background: black;
  height: 100px;
  width: 100%;
}
ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
a {
  color: white;
  padding: 0 10px;
  text-decoration: none;
}
.nav-inner {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.text {
  color: white;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}
img {
  width: 50px;
}

<nav>
  <div class="nav-inner">
    <ul>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href=""><img src="http://i.imgur.com/8Iu55Ho.png"></a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
    </ul>
    
    <div class="text">Lorem ipsum</div>
  </div>
</nav>