margin-left: auto and margin-right: auto not working on input

Question

I have an input in a form that I am trying to align in the center. Usually margin-left:auto and margin-right: auto fail to respond when display:

Answer 1

You want the three forms together to be aligned in the center? Wrap them in a single div and center that div instead.

Answer 2

In my case, it was float: left that I forgot about. So, make sure you apply float: none to your input field.

You already have display: block and margin: 0 auto, you just need to set width too.

Example that should work:

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

If that doesn't work try adding !important to the values or make sure your style is not overwritten by something else.

Answer 3

in addition to specifying width and display block also check if the float property is set to none.

Answer 4

In order for margin: 0 auto; to work, in addition to display:block a width needs to be specified.

Answer 5

In addiction to everything, you may check if your body have the parameter position. It may be set to fixed.

Answer 6

You have can do something like this:

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