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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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