无法使用 flexbox 在 HTML 表单中居中按钮 - 内部代码

Question

大家好，我的按钮似乎无法在 flexbox 容器中居中 class="hero"。知道这是为什么吗？

该按钮位于电子邮件表单下方，但与其左对齐（从同一位置开始）。

我正在尝试像 link:https://codepen.io/freeCodeCamp/full/RKRbwL 中的示例一样将按钮居中。我的 CSS 代码也有一个 CSS 重置，但我没有粘贴它。谢谢！

* {
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  min-height: 100vh;
  background-color: #eee;
  color: black;
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  font-weight: 900;
  font-size: 1em;
  padding: 20px 10px;
  flex-wrap: wrap;
  border-bottom: 1px solid grey;
  position: sticky;
}

ul {
  flex-grow: 1;
  max-width: 30%;
  display: flex;
  justify-content: space-around;
  text-decoration: none;
}

img {
  display: flex;
  width: 40vw;
}

ul li {
  display: inline;
  text-decoration: none;
  display: flex;
}

.nav-links a {
  text-decoration: none;
  color: black;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

h1 {
  font-size: 2em;
  font-weight: 700;
  padding: 20px;
}

input[type="email"] {
  padding: 5px 10px;
  margin: 10px 0px;
  border: solid 1px black;
  width: 350px;
}

input[type="submit"] {}

@media (max-width: 700px) {
  header {
    font-size: 1em;
  }
  nav {
    display: flex;
    flex-direction: column;
  }
  ul {
    display: flex;
    flex-wrap: wrap;
  }
}

<html>

<body>
  <header>
    <nav class="Navbar">
      <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo" class="nav-img">
      <ul class="nav-links">
        <li><a href="#" class="link">Features</a></li>
        <li><a href="#" class="link">How It Works</a></li>
        <li><a href="#" class="link">Pricing</a></li>
      </ul>
    </nav>
  </header>
  <section class="hero">
    <h1>Handcrafted, home-made masterpieces</h1>
    <form class="email-form">
      <div class="email-form">
        <label for="email"></label>
        <input type="email" name="email" id="email" placeholder="Enter your email address" required>
      </div>
      <div class="button-center">
        <input class="sub-button" type="submit" value="GET STARTED">
      </div>
    </form>
  </section>
</body>

</html>

Answer 1

只需添加

.button-center { text-align: center}

你的容器是居中的，但是是全宽的，所以按钮向左，添加上面的代码，将使按钮居中。

Answer 2

对于弹性解决方案，您有一些选择。这实际上仅取决于您的设计范围。这里有一些：

.button-center {
  display: flex;
  justify-content: center;
  /* text-align: center; ~ non-flex solution */
}

form.email-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

看到它在这里工作：

* {
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  min-height: 100vh;
  background-color: #eee;
  color: black;
}

.button-center {
  display: flex;
  justify-content: center;
  /*text-align: center;*/
}

form.email-form {
  display: flex;
  flex-direction: column;
  align-items: center;
} 

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  font-weight: 900;
  font-size: 1em;
  padding: 20px 10px;
  flex-wrap: wrap;
  border-bottom: 1px solid grey;
  position: sticky;
}

ul {
  flex-grow: 1;
  max-width: 30%;
  display: flex;
  justify-content: space-around;
  text-decoration: none;
}

img {
  display: flex;
  width: 40vw;
}

ul li {
  display: inline;
  text-decoration: none;
  display: flex;
}

.nav-links a {
  text-decoration: none;
  color: black;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

h1 {
  font-size: 2em;
  font-weight: 700;
  padding: 20px;
}

input[type="email"] {
  padding: 5px 10px;
  margin: 10px 0px;
  border: solid 1px black;
  width: 350px;
}

input[type="submit"] {}

@media (max-width: 700px) {
  header {
    font-size: 1em;
  }
  nav {
    display: flex;
    flex-direction: column;
  }
  ul {
    display: flex;
    flex-wrap: wrap;
  }
}

<html>

<body>
  <header>
    <nav class="Navbar">
      <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo" class="nav-img">
      <ul class="nav-links">
        <li><a href="#" class="link">Features</a></li>
        <li><a href="#" class="link">How It Works</a></li>
        <li><a href="#" class="link">Pricing</a></li>
      </ul>
    </nav>
  </header>
  <section class="hero">
    <h1>Handcrafted, home-made masterpieces</h1>
    <form class="email-form">
      <div class="email-form">
        <label for="email"></label>
        <input type="email" name="email" id="email" placeholder="Enter your email address" required>
      </div>
      <div class="button-center">
        <input class="sub-button" type="submit" value="GET STARTED">
      </div>
    </form>
  </section>
</body>

</html>

无法使用 flexbox 在 HTML 表单中居中按钮 - 内部代码

Can't center button within a HTML form using flexbox - code inside

html

css

center

button

flexbox