Trying to center navbar menu for mobile

问题

I'm trying to make it so that my navbar gets centered once it reaches phone width screen size. I figure I just do @media all and (max-width: 600px) { {.menu ul? text-align: center;} } and I put that all under the css for desktop size. (Be nice. I just graduated 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">

This is all of my CSS below for the desktop screen size. I'm not sure what's wrong. It's just not changing or maybe I'm not putting the right 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;
  }
}

回答1:

In your case, .menu is the ul, so your media query rule won't target any HTML element(s). Also, text-align: center is not how you want to handle this. You've already specified a flex parent, so we can use justify-content to do the centering.

@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

来源：https://stackoverflow.com/questions/60518137/trying-to-center-navbar-menu-for-mobile