如何使用CSS将标头居中？

Question

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

这是html：

BaseClass

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;
  }
}

这是jsfidle：http://jsfiddle.net/jyc7Lkh4/ 注意：边距重复，但是尝试响应时遇到问题

我需要改变什么才能得到自己想要的东西？

Answer 1

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>

Answer 2

在此处将导航居中。您应该为.Navbar分配一个特定的宽度（在本次修改中，我将其分配为width：960px；并添加了margin：0 auto;使其居中。我还将背景转移到HEADER中。 ）

dataSource = new MatTableDataSource(this.getLista());

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;
  }
}

Answer 3

将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);
}