我将如何在 div 的中心对齐输入框？答案

【问题标题】：How would I go about aligning my input boxes in the center of a div?我将如何在 div 的中心对齐输入框？
【发布时间】：2019-05-25 12:10:23
【问题描述】：

我想使用网格将表单中的所有输入元素与我的 div 的中心对齐，该中心位于我的内容页面中。此外，如果我要增加或减少窗口大小以便使用网格工作方法流动，我希望它能够动态调整。

下面是代码sn-p。

input {
  border: 1px solid black;
  border-radius: 5px;
  margin: 5px;
  padding: 0px 5px 0px 5px;
  width: 150px;
  height: 20px;
}

.form {
  margin: 0 0 100px 0;
  text-align: right;
  width: 320px;
}

.text-box {
  width: 450px;
  height: 200px;
}

<body>
  <div class="container">
    <header>
      <a href="./index.html">Home</a>
      <a href="./getting-started.html">Getting Started</a>
      <a href="./tracks.html">Tracks</a>
      <a href="./contact-us.html">Contact Us</a>
    </header>
    <main>
      <form action="#" method="post">
        <div class="form">
          <label for="email">Email:</label>
          <input type="text" id="email" placeholder="Your Email" required><br>
          <label for="name">Name:</label>
          <input type="text" id="name" placeholder="Full Name" required><br>
          <label for="occ">Occupation:</label>
          <input type="text" id="occ" placeholder="Occupation"><br>
          <label for="xp">Experience:</label>
          <input type="text" id="xp" placeholder="Years/Months"><br>
          <label for="rs">Rolling Chassis:</label>
          <input type="text" id="rs" placeholder="Model"><br>
          <label for="engine">Engine:</label>
          <input type="text" id="engine" placeholder="Manufacturer"><br>
        </div>
        <input class="text-box" type="text" name="name" equired><br>
      </form>
    </main>
    <advert>
      <img src="./banner-ads.jpg" alt="A banner about banner adds">
    </advert>
    <aside></aside>
    <footer>Maximilian Crosby ©</footer>
  </div>
</body>

【问题讨论】：

标签： html css forms input alignment

【解决方案1】：

要使表单居中，您可以将以下代码添加到form（不是类.form）关于响应式，您可以执行类似于bootstrap 的操作或使用引导程序或使用@media 设置宽度.form 类的任意大小取决于屏幕大小。

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

【讨论】：

【解决方案2】：

您可以使用 flex 布局轻松地在中间对齐项目

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

【讨论】：

谢谢！如果我希望我的文本位于输入的左侧怎么办？另外我将如何使输入框更大以便用户可以输入更多内容？就像一段值得内容的段落。
@Maximilian 您可以将每个输入/标签包装在一个 div 中
您可以给输入 50% 的宽度和标签 50% 的宽度，并使用 text-align 作为标签以您想要的方式对齐文本