Why does margin:0 auto; not work on this input button?

Question

I\'m trying to center an input button within a form but the usual margin: 0 auto; isn\'t doing anything. Here\'s how my HTML is set up:

        
                      

              相关标签:
       
      

Answer 1

You can add a text-align: center to the input-field, which will automatically horizontally center anything within that element.

.input-field{
    width:60%;
    margin:0 auto;
    background-color:red;
    text-align:center;
}

Answer 2

For the margin: auto trick to work, the element must be a block. So, add display: block; to the button css and you'll be fine ;)

Answer 3

all input elements are inline by default, for applying margin you must use Display: block;