Question

我已经制作了一个菜单，现在我正试图将它集中在一起。

我这样做是为了让课程.navigation ul为display:block，然后执行margin:0 auto。

由于某种原因，这不起作用。

您可以在此处找到实时示例https://jsfiddle.net/fu7uore0/

Answer 1

很容易。为.navigation添加display: flex

＆＃13;

* {
  padding: 0;
  margin: 0;
}
/*Navigation section*/

.navigation {
  width: 100%;
  margin-top: 100px;
  position: absolute;
  background: transparent;
  z-index: 1;
  background: red;
  display: flex;
}
.navigation ul {
  list-style: none;
  padding: 0;
  display: block;
  margin: 0 auto;
}
.navigation ul li {
  display: inline-block;
  vertical-align: middle;
}
.navigation li img {
  width: 100px;
  height: 100px;
  z-index: 2;
}
/*The slider*/

.slick-slide {
  width: 100%;
  height: 100vh!important;
}
.slide img {
  width: 100%;
  height: 100%;
}

＆＃13;

<body>
  <div class="navigation">
    <ul>
      <li><a>Home</a>
      </li>
      <li><a>About me</a>
      </li>
      <li>
        <img src="http://phoenixsociety.com/img/phoenix-logo-k.png">
      </li>
      <li><a>Home</a>
      </li>
      <li><a>About me</a>
      </li>
    </ul>
  </div>
  <!--  <div class ="logo"><img src="http://phoenixsociety.com/img/phoenix-logo-k.png"></div> -->

  <!-- Bootstrap js -->
  <script src="js/bootstrap.min.js"></script>
  <!-- custom js -->
  <script src="js/custom.js"></script>
</body>

＆＃13;

Answer 2

您应该text-align: center;给.navigation ul以使子元素居中。

参考代码：

/*Navigation section*/

.navigation {
  width: 100%;
  margin-top: 100px;
  position: absolute;
  background: transparent;
  z-index: 1;
  background: red;
}
.navigation ul {
  list-style: none;
  padding: 0;
  display: block;
  margin: 0 auto;
  text-align: center;
}
.navigation ul li {
  display: inline-block;
}
.navigation li img {
  width: 100px;
  height: 100px;
  z-index: 2;
}
/*The slider*/

.slick-slide {
  width: 100%;
  height: 100vh!important;
}
.slide img {
  width: 100%;
  height: 100%;
}

<body>
  <div class="navigation">
    <ul>
      <li><a>Home</a>
      </li>
      <li><a>About me</a>
      </li>
      <li>
        <img src="http://phoenixsociety.com/img/phoenix-logo-k.png">
      </li>
      <li><a>Home</a>
      </li>
      <li><a>About me</a>
      </li>
    </ul>
  </div>
  <!--  <div class ="logo"><img src="http://phoenixsociety.com/img/phoenix-logo-k.png"></div> -->

  <!-- Bootstrap js -->
  <script src="js/bootstrap.min.js"></script>
  <!-- custom js -->
  <script src="js/custom.js"></script>
</body>

集中我的菜单

2 个答案: