为什么 margin:0 auto;不能在这个输入按钮上工作？答案

【问题标题】：Why does margin:0 auto; not work on this input button?为什么 margin:0 auto;不能在这个输入按钮上工作？
【发布时间】：2015-10-10 23:13:06
【问题描述】：

我试图在表单中居中输入按钮，但通常的边距：0 auto;没有做任何事情。这是我的 HTML 的设置方式：

<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;

}

这也是一个有问题的 JSFiddle (https://jsfiddle.net/wge66p83/)。从我添加的红色背景颜色可以看出，提交按钮没有居中，只是粘在input-field 的左边缘。我怎样才能让这个输入在我的 div 中居中？

【问题讨论】：

标签： html css

【解决方案1】：

要使margin: auto 技巧起作用，元素必须是block。因此，将display: block; 添加到按钮 css 就可以了；）

【讨论】：

【解决方案2】：

默认情况下所有输入元素都是内联的，要应用边距，您必须使用Display: block;

【讨论】：

【解决方案3】：

您可以在输入字段中添加 text-align: center，它会自动水平居中该元素内的任何内容。

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

【讨论】：