0

Здраствуйте! Нужно создать простенькое окно для входа на сайт, но начались проблемы с выравниванием по центру, вот HTML:

.content {
  display: flex;
  justify-content: center;
  margin-top: 150px;
}

.box {
  width: 300px;
  height: 350px;
  border-radius: 12px;
  background-color: #6e777a85;
}

.box input {
  display: grid;
  align-content: center;
  align-items: center;
  width: 40%;
}
<div class="content">
  <form class="box">
    <h1>LOGIN</h1>
    <input type="text" placeholder="Username">
    <input type="text" placeholder="Password">
    <input type="submit" value="Login">
  </form>
</div>

При таком варианте написания, как мне казалось, что поля для ввода должны были выровняться по центру блока, но поля для ввода и кнопка намертво прилипают к левому краю блока.

Ошибка выравнивания

1 ответ 1

1

У Вас не работало, потому что display: flex работает для дочерних елементов, а не для указанного в нем елементе.

.content {
  margin-top: 150px;
  display: flex;
  justify-content: center;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 300px;
  height: 350px;
  border-radius: 12px;
  background-color: #6e777a85;
}

.box input {
  display: grid;
  align-content: center;
  align-items: center;
  width: 40%;
}
<div class="content">
  <form class="box">
    <h1>LOGIN</h1>
    <input type="text" placeholder="Username">
    <input type="text" placeholder="Password">
    <input type="submit" value="Login">
  </form>
</div>

3
  • Спасибо! Если не сложно, можете объяснить, почему у меня не работало?
    – IRonny
    2 ноя 2020 в 18:18
  • 1
    Если используете display: grid, то рекомендую использовать в нём place-items: center
    – UModeL
    2 ноя 2020 в 18:20
  • Спасибо, буду знать!
    – IRonny
    2 ноя 2020 в 18:27

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.