@fleshik

Как выровнять форму по центру?

Подскажите как выровнять данную форму по центру и почему нижняя кнопка меньше остальных ведь ширина всем задана одинаковая https://jsfiddle.net/y9oqjwr1/
  • Вопрос задан
  • 225 просмотров
Решения вопроса 2
@nikita1711
.form {
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
 }
Ответ написан
Комментировать
nekoguard
@nekoguard
котер
Во-первых, не указан box-sizing: border-box, поэтому инпуты были больше чем нужно, за счет паддингов и границ.
Ну и ширину лучше задать форме, а инпутам и кнопку ширину 100%. Из-за отсутствия фиксированной ширины у формы, она занимала весь экран и не центрировалась.

* {
  box-sizing: border-box;
}

.form {
  display: block;
  margin: 0 auto;
  width: 340px;
}

input {
  border-radius: 5px;
  width: 100%;
  height: 50px;
  border: 1px solid #bbbbbb;
  display: block;
  padding-left: 20px;
}
        
.btn-form {
  padding: 20px 80px;
  height: 55px;
  width: 100%;
  border: 0;
  cursor: pointer;
 }
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
Как выровнять форму вам уже написали.
почему нижняя кнопка меньше остальных ведь ширина всем задана одинаковая
Потому что стоит значение box-sizing: content-box. Можете прописать следующее:
*, ::after, ::before{
  box-sizing: border-box;
}
Ответ написан
Комментировать
Pet4ok
@Pet4ok
Можно использовать тэг
<center>
текст
</center>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы