Html 将包含 div 中按钮的表单居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8595315/
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 a form that contains a button in a div
提问by sikas
I'm trying to align a <form>to be centered in a <div>. This is what I've done till now:
我正在尝试将 a 对齐<form>到 a 的中心<div>。这是我到目前为止所做的：
<div style="height:auto; margin: 0 auto; align:center;">
<form style="width:50%; margin:0 auto;" onSubmit="return false;">
</form>
</div>
This centers the form, but is there any other way to do this on a more professional way?
这使表格居中，但有没有其他更专业的方法来做到这一点？
I also have a button in this form which is aligned left by default. I tried to change the alignment but it failed.
我还有一个这种形式的按钮，默认情况下它是左对齐的。我试图改变对齐方式，但失败了。
Who can help me?
谁能帮我？
回答by Jason Gennaro
Simplest way is to remove the CSS from the HTML and remove the align:center.
最简单的方法是从 HTML 中删除 CSS 并删除align:center.
That way the buttonaligns naturally to the left.
这样就button自然地向左对齐了。
div{
height:auto;
margin:0 auto;
border:1px solid blue;
}
form{
border:1px solid red;
width:50%;
margin:0 auto;
}
HTML
HTML
<div>
<form>
<button></button>
</form>
</div>
Example:http://jsfiddle.net/kCt7k/
示例：http : //jsfiddle.net/kCt7k/
EDIT:
编辑：
I need the button to be centered.
我需要按钮居中。
Sorry, misread that in the original Q.
对不起，在原来的 Q 中误读了。
In that case, you can use text-align:center
在这种情况下，您可以使用 text-align:center
form{
border:1px solid red;
width:50%;
margin:0 auto;
text-align:center;
}
Example 2:http://jsfiddle.net/kCt7k/1/
示例 2：http : //jsfiddle.net/kCt7k/1/
However, this may mess with the other elements in the form.
但是，这可能会干扰表单中的其他元素。
You could just set the buttonas a blockelement and apply margins to it.
您可以将 设置button为block元素并对其应用边距。
button{
width:100px;
display:block;
margin:0 auto;
}
Example 3:http://jsfiddle.net/kCt7k/2/
示例 3：http : //jsfiddle.net/kCt7k/2/
回答by Sparky
[is] there any other way to be more professional?
[有没有其他更专业的方法？
<div style="height:auto; margin: 0 auto; align:center;">
Nobody else mentioned this error, but alignis not a CSS property.
没有其他人提到这个错误，但align不是 CSS 属性。
Perhaps you meant alignas a <div>attribute...
也许你的意思是align作为一个<div>属性......
<div align="center">
However, that's been deprecated, so centering horizontally within a <div>would be properly done with text-align...
但是，这已被弃用，因此<div>可以正确地在 a 内水平居中text-align...
<div style="text-align: center;">
回答by Jonathan Wood
Being "more professional" might entail moving your style attributes to a separate CSS file. Other than that, this seems like a perfectly reasonable approach.
“更专业”可能需要将您的样式属性移动到单独的 CSS 文件中。除此之外，这似乎是一个完全合理的方法。
Would you like me to guess what you did with the button that is wrong?
你想让我猜猜你用错误的按钮做了什么吗？
回答by Brian
The css is fine, but IMO the "correct" way to do this would be through a separate css file. Same with the onsubmit that should be through seperate jquery or js. For the button issue I'd need to see the css from the style sheet and any inline css you are using. could be any number of reasons that something else is overriding the behavior you want.
css 很好，但 IMO 执行此操作的“正确”方法是通过单独的 css 文件。与应该通过单独的 jquery 或 js 的 onsubmit 相同。对于按钮问题，我需要查看样式表中的 css 以及您正在使用的任何内联 css。可能是其他原因覆盖了您想要的行为的多种原因。
One tip with css is if the element isn't behaving correctly, put a 1px solid colored border around it and then you can see where it is being rendered in the browser. You can then put borders around the other items and see where things are overlapping or pushing an element out of the position you want.
css 的一个技巧是，如果元素行为不正确，在它周围放置一个 1px 纯色边框，然后您就可以看到它在浏览器中的呈现位置。然后，您可以在其他项目周围放置边框，并查看事物重叠的位置或将元素推出您想要的位置。
