与父 div 和 CSS/HTML 对齐

Question

我正在为我朋友的乐队做一个小项目，最近换了一个新的导航栏。它的布局方式是徽标位于中心，页面链接指向它的 left/right。到目前为止一切正常，但我想在右侧添加一些文本或图像，但无法弄清楚如何执行此操作，因为导航栏设置为将所有内容居中。此处图片中显示的示例： http://i.imgur.com/3sLWDuX.png

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

这是目前的样子，必须使用 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>

与父 div 和 CSS/HTML 对齐

Alignment against parent div with CSS/HTML

html

css

center

alignment