尝试将移动导航栏菜单居中

Question

我正在尝试使导航栏在达到手机宽度屏幕尺寸后居中。我想我只是做@media all and (max-width: 600px) { {.menu ul? text-align: center;} } 我把它们都放在 css 下以获得桌面大小。 （乖点。我刚从 Bootcamp 毕业 :)）

<div class="hero-image">
  <div class="topnav">
    <ul class="menu">
      <li class="item"><a href="#">Home</a></li>
      <li class="item"><a href="#">My Work</a></li>
      <li class="item"><a href="#">About Me</a></li>
    </ul>
  </div>
  <div class="hero-text">
    <h1>Kyle Williamson</h1>
    <h2>Web Developer</h2>
    <button>Contact me</button>
  </div>
</div>

<div class="about">
  <div class="about-text">

这是我下面针对桌面屏幕尺寸的所有 CSS。我不确定出了什么问题。它只是没有改变，或者我没有放置正确的 CSS？

@import url("https://fonts.googleapis.com/css?family=Muli:300|Spartan:300,400,600&display=swap");

* {
  box-sizing: border-box;
}

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  float: right;
}

.menu ul {
  text-align: center;
}

.menu li {
  list-style-type: none;
}

.menu li a {
  color: white;
  text-decoration: none;
  float: right;
  font-family: "Muli", serif;
  font-size: 23px;
  display: block;
  padding: 15px 7px;
  margin-right: 15px;
}

.menu li a:hover {
  background-color: white;
  color: black;
  transition: 0.3s;
}

.hero-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url("denver2.jpg");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text {
  font-family: "Muli";
  font-weight: normal;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

button {
  background: transparent;
  border-radius: 28px;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  border: 1px solid white;
  font-family: Arial;
  font-size: 17px;
  padding: 8px 15px;
  text-decoration: none;
  transition: 0.3s;
}

button:hover {
  background-color: white;
  color: black;
}

button:active {
  position: relative;
  top: 1px;
}

@media screen and (max-width: 600px) {
  .menu ul {
    text-align: center;
  }
}

Answer 1

在您的情况下，.menu 是 ul，因此您的媒体查询规则不会针对任何 HTML 元素。此外，text-align: center 不是您想要处理的方式。您已经指定了 flex 父级，因此我们可以使用 justify-content 进行居中。

@media screen and (max-width: 600px) {
  .menu  {
    justify-content: center;
    width: 100%;
  }
}

@import url("https://fonts.googleapis.com/css?family=Muli:300|Spartan:300,400,600&display=swap");

* {
  box-sizing: border-box;
}

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  float: right;
}

.menu ul {
  text-align: center;
}

.menu li {
  list-style-type: none;
}

.menu li a {
  color: white;
  text-decoration: none;
  float: right;
  font-family: "Muli", serif;
  font-size: 23px;
  display: block;
  padding: 15px 7px;
  margin-right: 15px;
}

.menu li a:hover {
  background-color: white;
  color: black;
  transition: 0.3s;
}

.hero-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url("denver2.jpg");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text {
  font-family: "Muli";
  font-weight: normal;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

button {
  background: transparent;
  border-radius: 28px;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  border: 1px solid white;
  font-family: Arial;
  font-size: 17px;
  padding: 8px 15px;
  text-decoration: none;
  transition: 0.3s;
}

button:hover {
  background-color: white;
  color: black;
}

button:active {
  position: relative;
  top: 1px;
}

@media screen and (max-width: 600px) {
  .menu  {
    justify-content: center;
    width: 100%;
  }
}

<div class="hero-image">
  <div class="topnav">
    <ul class="menu">
      <li class="item"><a href="#">Home</a></li>
      <li class="item"><a href="#">My Work</a></li>
      <li class="item"><a href="#">About Me</a></li>
    </ul>
  </div>
  <div class="hero-text">
    <h1>Kyle Williamson</h1>
    <h2>Web Developer</h2>
    <button>Contact me</button>
  </div>
</div>

jsFiddle