如何在页面中居中联系表单及其提交按钮？

Question

基本上，我试图将联系表及其提交按钮居中。我已经尝试了几个 CSS 的建议，但它们并没有改变它的位置，仍然卡在左边，因为按钮奇怪地位于表单的最右边。所有的建议和技巧将不胜感激。 只是知道我对编码还是个新手，所以我的技能非常有限，因为我还在学习。

这是“联系我们”页面的图片：

@font-face {
  Src: url(customfont/Futuristic.ttf);
  font-family: Future;
}

.Contact-box {
  position: static;
  transform: none;
}

h1 {
  margin-bottom: 1rem;
  color: red;
  text-align: center;
  font-size: 40px;
  font-family: Future;
}

form {
  display: inline-block;
  flex-direction: column;
  width: 24rem;
  gap: 1rem;
  margin-left: auto;
  margin-right: auto;
}

input,
textarea {
  padding: 1.5rem;
  background: transparent;
  border: 2px solid white;
  border-radius: 15px;
  width: 400px;
}

textarea {
  height: 7rem;
}

button {
  width: 8rem;
  padding: 1rem;
  cursor: pointer;
  background: blue;
  color: black;
}

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <div class="logo">
    <a href="#"><img src="https://via.placeholder.com/95" width="95" /></a>
  </div>
  <div class="coolname">
    <a href="#"><img src="https://via.placeholder.com/105" width="105" /></a>
  </div>
  <nav>
    <ul>
      <li class="current-page"><a href="home.html">Home</a></li>
      <li><a href="AboutUs.html">About Us</a></li>
      <li><a href="services.html">Services</a></li>
      <li><a href="Consultation & Quotes.html">Consultation & Quotes</a></li>
      <li><a href="ContactUs.html">Contact&nbsp;Us</a></li>
      <li><a href="clientreferrals.html" target="_blank">Client Referrals</a></li>
      <li><a href="blog.html" target="_blank">Blog</a></li>
    </ul>
  </nav>
  <br><br>
  <h1>Contact Us!</h1>
  <div class="Contact-box">
    <br><br>
    <form style="align:center;">
      <input type="text" name="Name" placeholder="First and Last Name" required>
      <input type="text" name="Email" placeholder="example@email.com" required>
      <input type="text" name="Subject" placeholder="Subject Line" required>
      <textarea name="Message" placeholder="Message" required></textarea>
      <br><br>
      <button type="submit">Send</button>
      <br><br>
    </form>
  </div>
  <footer>
    <div class="bottom-content">
      <h3>Geek Yourself Out</h3>
      <p>To get some behind-the-scenes action to staying updated on the latest projects, check out these social media links! All follows, likes, comments, and shares are appreciated. </p>
      <div class="socials">
        <li>
          <a href="https://www.facebook.com/Geekyourselfout/"><img src="facebook-box-fill.png" alt="Facebook" </a></li>
        <li>
          <a href="https://www.instagram.com/geekyourselfout/"><img src="instagram-fill.png" alt="Instagram" </a></li>
      </div>
    </div>
    <div class="bottom-page">
      <p>copyright &copy;2022 Geek Yourself Out. Designed by Kimmy Vo</p>
    </div>
  </footer>
</body>

Answer 1

您已将表单设置为 inline-block。我只是删除了它并添加了居中文本对齐方式以使按钮居中。

@font-face {
  Src: url(customfont/Futuristic.ttf);
  font-family: Future;
}

.Contact-box {
  position: static;
  transform: none;
}

h1 {
  margin-bottom: 1rem;
  color: red;
  text-align: center;
  font-size: 40px;
  font-family: Future;
}

form {
  /* display: inline-block; <--------------------------------------- HERE */
  flex-direction: column; 
  width: 24rem;
  gap: 1rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center; /* <----------------------------------------HERE */
}

input,
textarea {
  padding: 1.5rem;
  background: transparent;
  border: 2px solid white;
  border-radius: 15px;
  width: 400px;
}

textarea {
  height: 7rem;
}

button {
  width: 8rem;
  padding: 1rem;
  cursor: pointer;
  background: blue;
  color: black;
}

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <div class="logo">
    <a href="#"><img src="https://via.placeholder.com/95" width="95" /></a>
  </div>
  <div class="coolname">
    <a href="#"><img src="https://via.placeholder.com/105" width="105" /></a>
  </div>
  <nav>
    <ul>
      <li class="current-page"><a href="home.html">Home</a></li>
      <li><a href="AboutUs.html">About Us</a></li>
      <li><a href="services.html">Services</a></li>
      <li><a href="Consultation & Quotes.html">Consultation & Quotes</a></li>
      <li><a href="ContactUs.html">Contact&nbsp;Us</a></li>
      <li><a href="clientreferrals.html" target="_blank">Client Referrals</a></li>
      <li><a href="blog.html" target="_blank">Blog</a></li>
    </ul>
  </nav>
  <br><br>
  <h1>Contact Us!</h1>
  <div class="Contact-box">
    <br><br>
    <form style="align:center;">
      <input type="text" name="Name" placeholder="First and Last Name" required>
      <input type="text" name="Email" placeholder="example@email.com" required>
      <input type="text" name="Subject" placeholder="Subject Line" required>
      <textarea name="Message" placeholder="Message" required></textarea>
      <br><br>
      <button type="submit">Send</button>
      <br><br>
    </form>
  </div>
  <footer>
    <div class="bottom-content">
      <h3>Geek Yourself Out</h3>
      <p>To get some behind-the-scenes action to staying updated on the latest projects, check out these social media links! All follows, likes, comments, and shares are appreciated. </p>
      <div class="socials">
        <li>
          <a href="https://www.facebook.com/Geekyourselfout/"><img src="facebook-box-fill.png" alt="Facebook" </a></li>
        <li>
          <a href="https://www.instagram.com/geekyourselfout/"><img src="instagram-fill.png" alt="Instagram" </a></li>
      </div>
    </div>
    <div class="bottom-page">
      <p>copyright &copy;2022 Geek Yourself Out. Designed by Kimmy Vo</p>
    </div>
  </footer>
</body>

Answer 2

只需像这样更新您的 Contact-box class：

.Contact-box {
    position: static;
    transform: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

Answer 3

text-align: center; 仅对文本有影响，但不会居中块：

div {
  max-width: 50%;
  text-align: center;
  background: yellow;
  padding: 10px;
}

p {
  text-align: center;
}

<div>Lorem ipsum dolor.</div>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.</p>

如果你想居中块，你可以结合使用 flexbox (see this guide) 和 justify-content:

div {
  width: 100%;
  display: flex;
  justify-content: center;
}

span {
  width: 100px;
  background: aqua;
  display: block;
}

<div><span> center this </span></div>

所以我认为最好将表单包装在 full-width <div> 中并在表单上设置最大宽度：

div.form-container {
  display: flex;
  justify-content: center;
}

form {
  max-width: 50%
}

/* For smaller devices, 50% is too small. Doing this prevents the form from being "crushed": */
@media (max-width: 800px) {
  form {
    max-width: 90%;
  }
}

要使按钮居中，您可以简单地执行 text-align: center;。

如何在页面中居中联系表单及其提交按钮？

How can I centre a Contact Form and its Submit button in the page?

html

css

forms