Как красиво выровнять? HTML CSS

Question

Есть проблема: нужно выровнять блок с display: inline-block по середине. Почему-то свойство margin: 0 auto не помогло. Все на картинке.

form {
  display: inline-block;
  margin: 0 auto;
  background: lightblue;
}

form::after {
  content: "";
  width: 100%;
  display: block;
  clear: both;
}

<form action="">
  <div>
    <label for="">Имя</label>
    <input type="text" required>
  </div>

  <div>
    <label for="">Логин</label>
    <input type="text" required>
  </div>
</form>

Answer 1

Для inline-block'а:

body{
  text-align: center;
}
form {
  display: inline-block;
  margin: 0 auto
  background: lightblue;
}

form::after {
  content: "";
  width: 100%;
  display: block;
  clear: both;
}

<body>
<form action="">
    <div>
        <label for="">Имя</label>
        <input type="text" required>
    </div>

    <div>
        <label for="">Логин</label>
        <input type="text" required>
    </div>
</form>
</body>

Но зачем Вы задаете inline-block для формы? Не проще сделать ее блоком и выравнивать с помощью того же margin: 0 auto?

Answer 2

<body>
<div class="wraper-form">
<form action="">
    <div>
        <label for="">Имя</label>
        <input type="text" required>
    </div>

    <div>
        <label for="">Логин</label>
        <input type="text" required>
    </div>
</form>
</div>
</body>

.wraper-form{
  text-align: center;
}
form {
  display: inline-block;
  margin: 0 auto
  background: lightblue;
}

form::after {
  content: "";
  width: 100%;
  display: block;
  clear: both;
}

Answer 3

P.S.: адаптива не хочешь?

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
} /* Чтобы задавая ширину 200px, она была реально 200px */

form {
  max-width: 200px;
  margin: 0 auto;
  padding: 10px;
  background: lightblue;
}

form input {
  display: block;
  width: 100%;
  padding: 5px;
}

form input:not(:first-child) { /* Всем input в form, которые не первый элемент */
  margin-top: 10px;
}

<form action="">
  <input type="text" placeholder="Имя" required>
  <input type="text" placeholder="Логин" required>
</form>

БЛОГ НА HUSL

Как красиво выровнять? HTML CSS

Ответы (3 шт):