css - 导航栏中的居中 Logo

Question

好的，我制作了这个导航栏:

HTML:http://pastebin.com/Mgurej6L

CSS:http://pastebin.com/vA7b1dT6

我想在导航栏中间显示“Unity 代码”，但我已经尝试过了，但似乎无法让它工作。

有什么帮助吗？

Answer 1

好吧，为了使您的导航位于页面中心，您需要绳索您的导航> 在 div 中，所以我添加 div 和 class .rope你的风格.rope { display: flex; justify-content: center;}就像下面的代码:

/*Css Navigation code*/

.rope {
  display: flex;
  justify-content: center;
}
.unity-code-logo {
  background-size: 100px 59px;
  width: 50px;
  height: 59px;
  position: absolute;
  top: 20px;
  left: 460px;
}
.main-navigation {
  display: inline;
  font-family: ubuntu;
  font-size: 15px;
  font-weight: bold;
}
.main-navigation ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.main-navigation li {
  color: #fff;
  background: #181818;
  display: block;
  float: left;
  margin: 0 2px 0 0;
  padding: 12px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
}
.main-navigation li a {
  color: #fff;
  text-decoration: none;
  display: block;
}
.main-navigation li:hover {
  @include transition(background, 0.25s);
  background: #453E3E;
}
.main-navigation ul li ul {
  background: #181818;
  visibility: hidden;
  float: left;
  min-width: 150px;
  position: absolute;
  transition: visibility 0.65s ease-in;
  margin-top: 12px;
  left: 0;
  z-index: 999;
}
.main-navigation ul li:hover > ul,
.main-navigation ul li ul:hover {
  visibility: visible;
}
.main-navigation ul li ul li {
  clear: both;
  padding: 5px 0 5px 18px;
  width: 100%;
}
.main-navigationul li ul li:hover {
  background: #74b7e4;
}
.navbar-brand {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  text-align: center;
  margin: auto;
}

<div class="rope">
  <!--Navigation Bar-->
  <nav id="navigation" class="main-navigation" role="navigation">
    <ul class="navigation-menu-main">
      <li><a href="#" class="navigation-menu-main-item">Home</a>
      </li>
      <li><a href="#" class="navigation-menu-main-item">Store</a>
      </li>
      <li><img src="http://mt.google.com/vt/icon?color=ff004C13&name=icons/spotlight/spotlight-waypoint-b.png" style="height:10px;"></li>
      <li><a href="#" class="navigation-menu-main-item">Projects</a>
        <ul>
          <li><a href="#" class="navigation-menu-main-item sub-navigation-menu">Connect</a>
          </li>
          <li><a href="#" class="navigation-menu-main-item sub-navigation-menu">Alpha</a>
          </li>
          <li><a href="#" class="navigation-menu-main-item sub-navigation-menu">XXXX</a>
          </li>
          <li><a href="#" class="navigation-menu-main-item sub-navigation-menu">XXXX</a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

Also div(.rope) by default is 100% width so if you want to give width to rope div you need to add margin: 0 auto;to (.rope) in the style. Just Add <img> in another <li></li> but because you don't have but 3 so is not going to be in the middle it could be right or left otherwise is going to be with the middle <li></li> for the store below the word.

请告诉我您需要什么？