Html 动态居中对齐div内的按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21722432/
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 aligning buttons inside div dynamically?
提问by OCJP
I have a div which can have 2 or 4 buttons based on different scenario. I want the buttons inside the div to be center aligned. How it can be done. I have submitted my code below.
我有一个 div，它可以根据不同的场景有 2 个或 4 个按钮。我希望 div 内的按钮居中对齐。如何做到。我已经在下面提交了我的代码。
<div style="margin: 0 auto; width: 656px;">
<input type="submit" style="float:left;" value="Prev"/><input type="reset" value="Reset" style="float:left;"/>
<input type="submit" value="Submit" style="float:left;"/><input style="float:left;" type="submit" value="Close"/></div>
The problem is it works when four buttons gets displayed but not for 3,2 and 1 button scenario. How to center align this without specifying width ? Plz help.
问题是它在显示四个按钮时有效，但不适用于 3,2 和 1 按钮方案。如何在不指定宽度的情况下居中对齐？请帮忙。
回答by Mr. Alien
You need to use text-align: centeron the container element. Also, avoid using inlinestyles...
您需要text-align: center在容器元素上使用。另外，避免使用内联样式...
<div style="margin: 0 auto; width: 656px; text-align: center;">
Note: Make sure that you use
text-align: left;if you have any text inside thatdivelse they will be centered as well.
注意：
text-align: left;如果里面有任何文字，请确保使用，div否则它们也会居中。
As you commented, it looks like center to me
正如你所评论的，它看起来像我的中心
Still you are not believing that they are perfectly centered, I would tweak the containers widthand will show you that they are centered....
您仍然不相信它们完全居中，我会调整容器width并向您展示它们是居中的....
With 2 Buttons
带 2 个按钮
Note: Make sure you use CSS Reset as well... So that you get consistent styles in all browsers though this should be centered regardless of resetting the styles.
注意：确保您也使用 CSS 重置...以便您在所有浏览器中获得一致的样式，尽管无论重置样式都应该居中。
回答by Ankur Aggarwal
If buttons are the only thing present in your div, then you should give text-align:centerproperty to the div. With this everything inside the div will be center aligned not depending on the width.
如果按钮是 div 中唯一存在的东西，那么您应该为 div 提供text-align:center属性。有了这个，div 内的所有东西都将居中对齐，而不取决于宽度。
<div style="margin: 0 auto; width: 656px;text-align:center;">
<input type="submit" value="Prev"/><input type="reset" value="Reset"/>
<input type="submit" value="Submit"/><input type="submit" value="Close"/>
</div>
回答by user3300937
Try this:
尝试这个：
<div style="width:100%"><div style="margin: 0 auto; text-align: center;">
<input type="submit" value="One"/><input type="reset" value="Two"/> <input type="submit" value="Three"/><input type="reset" value="Four"/></div></div>
回答by DevelopmentIsMyPassion
Can you use below code and let me know. Just used text align centre
你可以使用下面的代码并让我知道。刚刚使用文本对齐中心
<div style="margin: 0 auto; width: 656px; text-align:center">
<input type="submit" value="Prev"/><input type="reset" value="Reset"/>
回答by Shirish Dhotre
you can simply specify text-align:center;style for div.
你可以简单地指定text-align:center; div 的样式。
Here, the code for you reference.
在这里，代码供您参考。
Style
---------------------
.row { text-align:center; }
.row input { margin:0px 5px; }
HTML
------------------
<div class="row">
<input type="submit" value="Prev"/><input type="reset" value="Reset"/>
<input type="submit" value="Submit"/><input type="submit" value="Close"/>
</div>
any element inside div having class 'row' will be center align.
div 内具有“row”类的任何元素都将居中对齐。
