margin-left: auto и margin-right: авто не работает при вводе

Question

У меня есть вход в форме, которую я пытаюсь выровнять в центре. Обычно margin-left:auto и margin-right: auto не отвечают, когда display: block не добавлен в CSS. Я добавил display: block в свой CSS, но он не отображается так, как мне бы хотелось.

Я сделал JSFiddle, чтобы его было легче понять: http://jsfiddle.net/XnKDQ/97/

Answer 1

Чтобы margin: 0 auto; работал, в дополнение к display:block необходимо указать width.

Answer 2

В моем случае, это было float: left, о котором я забыл.Поэтому убедитесь, что вы применили float: none к своему полю ввода.

У вас уже есть display: block и margin: 0 auto, вам просто нужно установить ширину.

Пример, который должен работать:

input{
     width:50% !important;
     margin:0 auto !important;
     display:block !important;
     float:none !important;
}

Если это не сработает, попробуйте добавить !important к значениям или убедитесь, что ваш стиль не перезаписан чем-то другим.

Answer 3

Я нашел решение для вас

Вы должны указать элемент ширина

input {
  display: block;
  width: 60px;
  margin: 10px auto;
  padding: 3px;
}

Answer 4

Вы можете сделать что-то вроде этого:

input {
  width: fit-content;
  margin: auto;
}

Answer 5

В зависимости от всего, вы можете проверить, есть ли у вашего тела положение параметра.Может быть установлен на фиксированный.

Answer 6

в дополнение к указанию ширины и блока отображения также проверьте, установлено ли для свойства float значение none.

Answer 7

Вы хотите, чтобы три формы вместе были выровнены по центру?Оберните их в один div и центрируйте вместо этого div.