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

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

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

Ответы

Ответ 1

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

Ответ 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 к значениям или убедитесь, что ваш стиль не перезаписан чем-то другим.

Ответ 3

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

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

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

Ответ 4

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

Ответ 5

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

Ответ 6

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

Ответ 7

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

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

Ответ 8

Онвука Гидеон Ты звезда! Так сильно, что я почувствовал необходимость присоединиться и ответить. Потратил часы в поисках этого. Вы только что решили мою проблему... центрирование блока контента внутри границы без потери выравнивания по левому краю. Лучшие Мужчины!