Question

伙计们我遇到了一个问题： HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>CSS</title>
        <meta http-equiv="author" content="@infinite"><!--Credits-->
        <link rel="stylesheet" type="text/css" href="css.css">
    </head>
    <body>
        <form >
            <input type="submit" value="Submit">
        </form>
    </body>
</html>

CSS：

body{
    background-color:black;
}
form{
    width:500px;
    border:solid 5px white;
}
input[type="submit"]{
    width:200px;
    border:solid 5px white;
    border-radius:50px;
    font-family:Impact,fantasy;
    font-size:300%;
    color:white;
    background-color:inherit;
    margin:300px auto 300px auto;
}

我想集中表单中的提交按钮，但它仍然粘在表单的左侧。＆＃34; auto＆＃34;在提交按钮的边距不起作用。

请帮助..

Answer 1

这是一个有效的demo

如果您希望margin: 0 auto方法起作用，则该元素必须是一个块，因此将display: block添加到提交按钮就可以了。

参考此answer，如果您希望margin: 0 auto能够工作，那么很高兴知道：

元素必须显示：block

元素不得浮动

元素不得具有固定或绝对位置

元素必须具有非自动
的宽度

Answer 2

您可以尝试在表单中添加：

form{
  width:500px;
  border:solid 5px white;
  text-align: center;
}

Answer 3

尝试将以下内容添加到输入按钮的样式：

display:block;

Answer 4

margin: auto;仅在

时水平居中

显示为block（或table）
元素不浮动
宽度不应为自动或100％

因此，要解决您的问题，请添加

input[type="submit"] {
    display: block;
}

默认情况下显示input inline。

无法使用保证金来控制内容

4 个答案: