Question

我正在尝试将输入按钮置于表单中但通常的边距：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中心？

Answer 1

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

Answer 2

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

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

Answer 3

默认情况下，所有输入元素都是内联的，为了应用保证金，您必须使用Display: block;

为什么保证金：0自动;不能使用此输入按钮？

3 个答案: