为什么margin:0 auto;不工作在这个输入按钮? [英] Why does margin:0 auto; not work on this input button?
问题描述
我尝试将表单中的输入按钮居中,但通常的边距:0 auto;不做任何事情。以下是我的HTML设置:
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:
<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/ =nofollow> https://jsfiddle.net/wge66p83/ )。正如你可以看到,通过我添加的红色背景颜色,提交按钮不居中,只是贴在 input-field
的左边缘。
Here is also a JSFiddle with the problem (https://jsfiddle.net/wge66p83/). As you can see by the red background color I added, the submit button isn't centering and is just sticking to the left edge of the input-field
. How can I get this input to center in my div?
推荐答案
对于 margin:auto code>技巧工作,元素必须是
块
。所以,添加 display:block;
到按钮css,你会很好;)
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 ;)
这篇关于为什么margin:0 auto;不工作在这个输入按钮?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!