Как бы я выровнял свои поля ввода в центре div? - PullRequest
Новая
       36

Как бы я выровнял свои поля ввода в центре div?

0 голосов
/ 27 декабря 2018

Я бы хотел выровнять все элементы ввода в моей форме по центру моего элемента div, который находится на моей странице содержимого, с использованием сетки.Также мне бы хотелось, чтобы он динамически корректировался, если бы мне пришлось увеличивать или уменьшать размер окна, чтобы использовать метод работы с сеткой.

Ниже приведен фрагмент кода. 

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>

Ответы [ 2 ]

0 голосов
/ 28 декабря 2018

Чтобы центрировать форму, вы можете добавить приведенный ниже код к form (не к классу .form). Что касается адаптивного, вы можете сделать что-то похожее на bootstrap или использовать bootstrap или @media для установки ширины.класса .form до любого размера, который вы хотите, зависит от размера экрана. 

form {
  display: flex;
  flex-direction: column;
  align-items: center;
}
0 голосов
/ 27 декабря 2018

Вы можете использовать гибкий макет, чтобы легко выровнять элементы в середине 

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