html - 如何使用CSS将标题居中？

Question

我使用 flex box 创建了一个导航栏菜单，没有框架，只有 html 和 css没有 Bootstrap 或基础这是我想要的样子:\

这是 html:

ul,
nav {
  list-style: none;
}

.Navbar {
  display: flex;
  padding: 16px;
  font-family: sans-serif;
  color: white;
  background-color: orange;
}

.Navbar__Link {
  padding-right: 30px;
  font-family: ProximaNova;
  font-size: 18px;
  color: #fff;
}

.Navbar__Items {
  display: flex;
}

.Navbar__Items--right {
  margin-left: auto;
}

.Navbar__Link-toggle {
  display: none;
}

@media only screen and (max-width: 768px) {
  .Navbar__Items,
  .Navbar {
    flex-direction: column;
  }
  .Navbar__Items {
    display: none;
  }
  .Navbar__Items--right {
    margin-left: 0;
  }
  .Navbar__ToggleShow {
    display: flex;
  }
  .Navbar__Link-toggle {
    align-self: flex-end;
    display: initial;
    position: absolute;
    cursor: pointer;
  }
}

<header>
  <div class="Navbar">
    <div class="Navbar__Link Navbar__Link-brand">
      Dronezone
    </div>
    <div class="Navbar__Link Navbar__Link-toggle">
      <i class="fas fa-bars"></i>
    </div>
    <nav class="Navbar__Items Navbar__Items--right">
      <div class="Navbar__Link">
        Home
      </div>
      <div class="Navbar__Link">
        About
      </div>
      <div class="Navbar__Link">
        Pricing
      </div>
      <div class="Navbar__Link">
        Our drones
      </div>
      <div class="Navbar__Link">
        Our Realization
      </div>
      <div class="Navbar__Link">
        Contact
      </div>


    </nav>
  </div>
</header>

这里是 jsfidle:http://jsfiddle.net/jyc7Lkh4/注意:我尝试了 margin 但我在尝试响应时遇到问题

我需要改变什么才能得到我想要的？

Answer 1

将 NAVIGATION 居中。您应该为您的 .Navbar 分配一个特定的宽度(在我所做的这个修改中，我将其分配为 width: 960px; 并添加 margin: 0 auto; 以居中定位它。我还将背景转移到 HEADER 中。 )

ul,
nav {
  list-style: none;
}
/* Changes I Make */
header {
  background-color: orange;
}

.Navbar {
  display: flex;
  padding: 16px;
  font-family: sans-serif;
  color: white;
  width: 960px; /* Added Code */
  margin: 0 auto; /* Added Code */
}

.Navbar__Link {
  padding-right: 30px;
  font-family: ProximaNova;
  font-size: 18px;
  color: #fff;
}

.Navbar__Items {
  display: flex;
}

.Navbar__Items--right {
  margin-left: auto;
}

.Navbar__Link-toggle {
  display: none;
}

@media only screen and (max-width: 768px) {
  .Navbar__Items,
  .Navbar {
    flex-direction: column;
  }
  .Navbar__Items {
    display: none;
  }
  .Navbar__Items--right {
    margin-left: 0;
  }
  .Navbar__ToggleShow {
    display: flex;
  }
  .Navbar__Link-toggle {
    align-self: flex-end;
    display: initial;
    position: absolute;
    cursor: pointer;
  }
}

<header>
  <div class="Navbar">
    <div class="Navbar__Link Navbar__Link-brand">
      Dronezone
    </div>
    <div class="Navbar__Link Navbar__Link-toggle">
      <i class="fas fa-bars"></i>
    </div>
    <nav class="Navbar__Items Navbar__Items--right">
      <div class="Navbar__Link">
        Home
      </div>
      <div class="Navbar__Link">
        About
      </div>
      <div class="Navbar__Link">
        Pricing
      </div>
      <div class="Navbar__Link">
        Our drones
      </div>
      <div class="Navbar__Link">
        Our Realization
      </div>
      <div class="Navbar__Link">
        Contact
      </div>


    </nav>
  </div>
</header>