爲什麼margin：0 auto;不在這個輸入按鈕上工作？

我想中心一個輸入按鈕，但通常的邊界：0 auto;沒有做任何事情。這裏是我的HTML是如何設置的：爲什麼margin：0 auto;不在這個輸入按鈕上工作？

<body> 
<div class="container"> 
    <div class="contact-div"> 
     <form id="contact-form"> 
      <div class="input-field"> 
       <input type="button" value="Submit" class="submit-button" /> 
      </div> 
     </form> 
    </div> 
</div> 
</body>

和CSS：

body { 
    padding:0; 
    margin:0; 
    width:100%; 
    font-family: Century Gothic,sans-serif; 
} 

.container { 
    width:100%; 
} 

#contact-div { 
    height:100vh; 
    width:100%; 
    background: url("images/contactpic3.jpg") no-repeat center fixed; 
    background-size: cover; 
} 

.input-field{ 
    width:60%; 
    margin:0 auto; 
} 

.submit-button { 
    height:40px; 
    width:200px; 
    margin:auto; 
    border:2px black solid; 
    border-radius:10px; 
    font-size:1.5em; 
    text-align:center; 

}

這裏也是有問題（https://jsfiddle.net/wge66p83/）一個的jsfiddle。正如你所看到的，我添加了紅色的背景色，提交按鈕不是居中，只是粘在input-field的左邊緣。我怎樣才能得到這個輸入中心在我的div？

來源

2015-10-10 AlecR

爲margin: auto招工作，元素必須是block。因此，添加display: block;到按鈕的CSS，你會被罰款;）

來源

2015-10-10 23:18:20

您可以將一個text-align：center添加到輸入字段，該字段會自動將該元素內的任何內容居中。

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

來源

2015-10-10 23:16:36

所有輸入元素是行內默認情況下，將保證金必須使用Display: block;

來源

2015-10-11 01:15:05

爲什麼margin：0 auto;不在這個輸入按鈕上工作？

回答

相關問題