CODEWITHSUNDEEP
htmlcssformsinputalignment
Maximilian
Maximilian

Reputation: 537

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

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>

Upvotes: 0

Views: 70

Answers (2)

Victoria Le
Victoria Le

Reputation: 940

To center your form, you can add the code below to form (not the class .form) About the responsive, you can do something similar to bootstrap or use bootstrap or use @media to set the width of the class .form to whatever size you want depends on screen size.

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

Upvotes: 0

Omar Mneimneh
Omar Mneimneh

Reputation: 466

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;
}

Upvotes: 1

Related Questions