如何使用 css 和 html 将按钮居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13836059/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to center a button with css and html
提问by Bbosa Frank
i want to center one button up and the other down. how can i edit my css to achieve this.here is
我想将一个按钮居中，另一个居中。我如何编辑我的 css 来实现这一点。这里是
css-
css-
#ContactForm .button {
margin-left:8px;
margin-left:9px;
float:right;
margin-right:2px;
font-size:20px;
font-weight:700;
color:#fff;
line-height:35px;
width:90px;
text-align:center;
background:url(../images/button_form.gif) top repeat-x #308da2;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;behavior:url(js/PIE.htc);
position:relative;
text-decoration:none
}
html-
html-
<div>
<a href="#" class="button" onclick="document.getElementById('ContactForm').submit()">send</a>
<a href="#" class="button" onclick="document.getElementById('ContactForm').reset()">clear</a>
</div>
回答by mr_lewjam
Here's a jsfiddle with what you want.... http://jsfiddle.net/xgdVM/
这是你想要的 jsfiddle ...... http://jsfiddle.net/xgdVM/
you can set the text-align of the container to center and set the display property of the buttons to block..
您可以将容器的文本对齐设置为居中并将按钮的显示属性设置为阻止..
CSS:
CSS：
#form{text-align:center;}
a{display:block;}?
HTML
HTML
<div id="form">
<a href="#" class="button" onclick="document.getElementById('ContactForm').submit()">send</a>
<a href="#" class="button" onclick="document.getElementById('ContactForm').reset()">clear</a>
</div>?
OR if your buttons have a set witdth i.e width:70px;then you can just give them the css property margin:0 auto;and they will be centered by applying equal margins to the left and right
或者，如果你的按钮有一个设置 witdth iewidth:70px;那么你可以给他们 css 属性margin:0 auto;，他们将通过向左右应用相等的边距来居中
回答by John Smith
If you mean center horizontally:
如果您的意思是水平居中：
#ContactForm .button {
margin: 0 auto; /* centers, provided there's a width set */
display: block;
font-size:20px;
font-weight:700;
color:#fff;
line-height:35px;
width:90px; /* width set */
text-align:center;
background:url(../images/button_form.gif) top repeat-x #308da2;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;behavior:url(js/PIE.htc);
position:relative;
text-decoration:none
}
