使用 CSS/HTML 与父 div 对齐答案

【问题标题】：Alignment against parent div with CSS/HTML使用 CSS/HTML 与父 div 对齐
【发布时间】：2016-01-16 05:11:50
【问题描述】：

我正在为我好友的乐队做一个小项目，最近换了一个新的导航栏。它的布局方式是徽标位于中心，页面链接位于其左侧/右侧。到目前为止，一切正常，但我想在右侧添加一些文本或图像，但由于导航栏设置为将所有内容居中，因此无法弄清楚如何执行此操作。此处图片中显示的示例： 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>

任何帮助将不胜感激！

【问题讨论】：

您可以使用的一个技巧是将导航栏添加到具有 3 列分布为 25% 50% 25% 的表中。在中间列添加导航栏，在右列添加“文本”。
没有<span2>、<center> 这样的元素已被弃用，不应再使用..在任何情况下都不允许作为ul 的子元素。 ...哦，它没有相应的结束标记即使它没有被弃用。基本上，HTML结构是完全无效的。

标签： html css alignment center

【解决方案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>

【讨论】：

完美运行。谢谢！