Html 将按钮与中心对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9971740/
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
Aligning a button to the center
提问by Garry
I have a simple submit button. I am wanting to align it to the center. Here is my code:
我有一个简单的提交按钮。我想将它与中心对齐。这是我的代码：
<input type="submit" name="btnSubmit" value="Submit" onClick="Submit" align="center">
However, it does not work. What is the best/easiest way to do this?
但是，它不起作用。最好/最简单的方法是什么？
回答by lvil
You should use something like this:
你应该使用这样的东西：
<div style="text-align:center">
<input type="submit" />
</div>
Or you could use something like this. By giving the element a width and specifying autofor the left and right margins the element will center itself in its parent.
或者你可以使用这样的东西。通过给元素一个宽度并指定auto左右边距，元素将在其父元素中居中。
<input type="submit" style="width: 300px; margin: 0 auto;" />
回答by Roy
For me it worked using flexbox, which is in my opinion the cleanest solution.
对我来说，它使用 flexbox 工作，在我看来这是最干净的解决方案。
Add a css class around the parent div / element with :
在父 div / 元素周围添加一个 css 类：
.parent {
display: flex;
}
and for the button use:
和按钮使用：
.button {
justify-content: center;
}
You should use a parent div, otherwise the button doesn't 'know' what the middle of the page / element is.
您应该使用父 div，否则按钮不会“知道”页面/元素的中间是什么。
If this is not working, try :
如果这不起作用，请尝试：
#wrapper {
display:flex;
justify-content: center;
}
回答by Anna Medyukh
Here is what worked for me:
这是对我有用的：
<input type="submit" style="margin-left: 50%">
If you only add margin, without the left part, it will center the submit button into the middle of your entire page, making it difficult to find and rendering your form incomplete for people who don't have the patience to find a submit button lol. margin-left centers it within the same line, so it's not further down your page than you intended. You can also use pixels instead of percentage if you just want to indent the submit button a bit and not all the way halfway across the page.
如果您只添加边距，而没有左侧部分，则会将提交按钮居中放置在整个页面的中间，对于没有耐心找到提交按钮的人来说，很难找到并呈现您的表单不完整，哈哈. margin-left 在同一行内居中，因此它不会比您预期的更靠近您的页面。如果您只想将提交按钮缩进一点而不是整个页面的一半，您也可以使用像素而不是百分比。
回答by japetko
Add width:100px, margin:50%.
Now the left side of the button is set to the center.
Finally add half of the widthof the button in our case 50px.
The middle of the button is in the center.
添加width:100px，margin:50%。现在按钮的左侧设置为中心。
最后在我们的例子中添加按钮宽度的一半50px。
按钮的中间位于中心。
<input type='submit' style='width:100px;margin:0 50%;position:relative;left:-50px;'>
回答by Holly Williford
margin: 50%;
You can adjust the percentage as needed. It seems to work for me in responsive emails.
您可以根据需要调整百分比。它似乎在响应式电子邮件中对我有用。
