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

CssHtml

Css Problem Overview

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: block isn't added to the CSS. I have added display: block to my CSS but still it isn't display as I would like it to.

I've made a JSFiddle to keep easier to understand: http://jsfiddle.net/XnKDQ/97/

Css Solutions

Solution 1 - Css

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

Solution 2 - Css

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.

Solution 3 - Css

I found the solution for you

you should specify element width

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

Solution 4 - Css

You have can do something like this:

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

Solution 5 - Css

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

Solution 6 - Css

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

Solution 7 - Css

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

Categories
Recommended Css Solutions
Recommended Html Solutions

Previous Solution:

Rails: Could not find railties

Ruby on-RailsRubygems

Next Solution:

Memory dump formatted like xxd from gdb

PythonDebuggingGdbPretty Print

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionZaki AzizView Question on Stackoverflow
Solution 1 - CssChristophView Answer on Stackoverflow
Solution 2 - CssMikeView Answer on Stackoverflow
Solution 3 - CssMo.View Answer on Stackoverflow
Solution 4 - CssOnwuka GideonView Answer on Stackoverflow
Solution 5 - CssSuprView Answer on Stackoverflow
Solution 6 - CssAkash SinhaView Answer on Stackoverflow
Solution 7 - CssCarl BrusellView Answer on Stackoverflow