如何使用css将标题居中？

Question

我使用弹性框创建了一个导航栏菜单，没有框架，只有 html 和 css 没有引导程序或基础 这是我想要的样子：\

这是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/ 注意：Itried margin 但我在尝试响应时遇到问题

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

Answer 1

将导航置于此处。您应该为您的 .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>

Answer 2

将background-color: orange 从.Navbar 移动到header。

您还应该考虑更改类名的命名约定。它们通常是小写的，并且在单词之间使用破折号，例如navbar-link 而不是 Navbar__Link，尽管更重要的是确保命名约定在整个项目中保持一致。

body {
    position: relative;
}

header {
    background-color: orange;
    width: 100%;
    height: 80px;
}

.Navbar {
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
}

Answer 3

ul,
nav {
  list-style: none;
}
header {
    position: relative;
    background-image: linear-gradient(to right, rgb(202, 12, 12,1), rgba(255,0,0,1));
}
.Navbar {
    display: flex;
    padding: 16px;
    font-family: sans-serif;
    color: white;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.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>