Question

I'd like to align all input elements within my form to the center of my div which is in my content page using grid. Also I'd like it to dynamically adjust if I were to increase or decrease the window size in order to flow with grid work method.

Below is the code snippet.

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>

Answer 1

You can use the flex layout to easily align items in the middle

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

Answer 2

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

.form

How would I go about aligning my input boxes in the center of a div?

2 个答案: