中心表单提交按钮 HTML / CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4221263/
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
Center form submit buttons HTML / CSS
提问by Belgin Fish
I'm having troubles centering my HTML form submit buttons in CSS.
我在将 HTML 表单提交按钮置于 CSS 中时遇到了麻烦。
Right now I'm using:
现在我正在使用：
<input value="Search" title="Search" type="submit" id="btn_s">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
with this CSS content
使用此 CSS 内容
#btn_s{
width: 100px;
margin-left: auto;
margin-right: auto;
}
#btn_i {
width: 125px;
margin-left: auto;
margin-right: auto;
}
And it's not doing anything. I know I'm probably doing something stupid wrong. How can I fix this?
它没有做任何事情。我知道我可能在做一些愚蠢的错误。我怎样才能解决这个问题？
回答by Sebastian Patane Masuelli
http://jsfiddle.net/SebastianPataneMasuelli/rJxQC/
http://jsfiddle.net/SebastianPataneMasuelli/rJxQC/
i just wrapped a div around them and made it align center. then you don't need any css on the buttons to center them.
我只是在它们周围包裹了一个 div 并使其居中对齐。那么你不需要按钮上的任何 css 来使它们居中。
<div class="buttonHolder">
<input value="Search" title="Search" type="submit" id="btn_s">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
</div>
.buttonHolder{ text-align: center; }
回答by Tom
Input elements are inline by default. Add display:blockto get the margins to apply. This will, however, break the buttons onto two separate lines. Use a wrapping <div>with text-align: centeras suggested by others to get them on the same line.
默认情况下，输入元素是内联的。添加display:block以获得要应用的边距。但是，这会将按钮分成两行。使用包装<div>与text-align: center其他人的建议，让他们在同一行。
回答by Adrian Adamczyk
I see a few answers here, most of them complicated or with some cons (additional divs, text-align doesn't work because of display: inline-block). I think this is the simplest and problem-free solution:
我在这里看到了一些答案，其中大部分都很复杂或有一些缺点（额外的 div，由于 display: inline-block，文本对齐不起作用）。我认为这是最简单且无问题的解决方案：
HTML:
HTML：
<table>
<!-- Rows -->
<tr>
<td>E-MAIL</td>
<td><input name="email" type="email" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Register!" /></td>
</tr>
</table>
CSS:
CSS：
table input[type="submit"] {
display: block;
margin: 0 auto;
}
回答by SuperDuck
Try this :
尝试这个 ：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<style type="text/css">
#btn_s{
width:100px;
}
#btn_i {
width:125px;
}
#formbox {
width:400px;
margin:auto 0;
text-align: center;
}
</style>
</head>
<body>
<form method="post" action="">
<div id="formbox">
<input value="Search" title="Search" type="submit" id="btn_s">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
</div>
</form>
</body>
This has 2 examples, you can use the one that fits best in your situation.
这有 2 个示例，您可以使用最适合您情况的示例。
- use
text-align:centeron the parent container, or create a container for this. - if the container has to have a fixed size, use
autoleft and right margins to center it in the parent container.
- 使用
text-align:center父容器上，或为此创建一个容器。 - 如果容器必须具有固定大小，请使用
auto左右边距使其在父容器中居中。
note that autois used with single blocks to center them in the parent space by distrubuting the empty space to the left and right.
请注意，auto它与单个块一起使用，通过将空白空间分配到左侧和右侧来使它们在父空间中居中。
回答by Annie
I'm assuming that the buttons are supposed to be next to each other on the same line, they should not each be centered using the 'auto' margin, but placed inside a div with a defined width that has a margin '0 auto':
我假设按钮应该在同一行上彼此相邻，它们不应该使用“自动”边距居中，而是放置在具有定义宽度的 div 内，边距为“0 自动” ：
CSS:
CSS：
#centerbuttons{
width:250px;
margin:0 auto;
}
HTML (after removing the margin properties from your buttons' CSS):
HTML（从按钮的 CSS 中删除边距属性后）：
<div id="centerbuttons">
<input value="Search" title="Search" type="submit">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit">
</div>
回答by kta
<style>
form div {
width: 400px;
border: 1px solid black;
}
form input[type='submit'] {
display: inline-block;
width: 70px;
}
div.submitWrapper {
text-align: center;
}
</style>
<form>
<div class='submitWrapper'>
<input type='submit' name='submit' value='Submit'>
</div>
Also Check this jsfiddle
还要检查这个jsfiddle
回答by Dave Taitelbaum
/* here is what works for me - set up as a class */
.button {
text-align: center;
display: block;
margin: 0 auto;
}
/* you can set padding and width to whatever works best */
回答by Nagev
One simple solution if only one button needs to be centered is something like:
如果只有一个按钮需要居中，一种简单的解决方案是：
<input type='submit' style='display:flex; justify-content:center;' value='Submit'>
You can use a similar style to handle several buttons.
您可以使用类似的样式来处理多个按钮。
