按钮中心 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3622756/
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
Button Center CSS
提问by Stevanicus
Usual CSS centering issue, just not working for me, the problem is that I don't know the finished width px
通常的 CSS 居中问题，对我不起作用，问题是我不知道完成的宽度 px
I have a div for the entire nav and then each button inside, they dont center anymore when there is more than one button. :(
我有一个 div 用于整个导航，然后每个按钮都在里面，当有多个按钮时，它们不再居中。:(
CSS
CSS
.nav{
margin-top:167px;
width:1024px;
height:34px;
}
.nav_button{
height:34px;
margin:0 auto;
margin-right:10px;
float:left;
}
HTML
HTML
<div class="nav">
<div class="nav_button">
<div class="b_left"></div>
<div class="b_middle">Home</div>
<div class="b_right"></div>
</div>
<div class="nav_button">
<div class="b_left"></div>
<div class="b_middle">Contact Us</div>
<div class="b_right"></div>
</div>
</div>
Any help would be greatly appreciated. Thanks
任何帮助将不胜感激。谢谢
Result
结果
If the width is unknown, I did find a way a center the buttons, not entirely happy but doesnt matter, it works :D
如果宽度未知，我确实找到了一种将按钮居中的方法，虽然不是很高兴但没关系，它可以工作：D
The best way is to put it in a table
最好的办法是放在桌子上
<table class="nav" align="center">
<tr>
<td>
<div class="nav_button">
<div class="b_left"></div>
<div class="b_middle">Home</div>
<div class="b_right"></div>
</div>
<div class="nav_button">
<div class="b_left"></div>
<div class="b_middle">Contact Us</div>
<div class="b_right"></div>
</div>
</td>
</tr>
</table>
回答by markbaldy
I realize this is a very old question, but I stumbled across this problem today and I got it to work with
我意识到这是一个非常古老的问题，但我今天偶然发现了这个问题，并得到了解决
<div style="text-align:center;">
<button>button1</button>
<button>button2</button>
</div>
Cheers, Mark
干杯，马克
回答by Rani
Another nice option is to use :
另一个不错的选择是使用：
width: 40%;
margin-left: 30%;
margin-right: 30%
回答by Amin
Consider adding this to your CSS to resolve the problem:
考虑将其添加到您的 CSS 以解决问题：
button {
margin: 0 auto;
display: block;
}
回答by Espresso
The problem is with the following CSS line on .nav_button:
问题在于以下 CSS 行.nav_button：
margin: 0 auto;
That would only work if you had one button, that's why they're off-centered when there are more than one nav_buttondivs.
这只有在你有一个按钮时才有效，这就是为什么当有多个nav_buttondiv时它们会偏离中心。
If you want all your buttons centered nest the nav_buttonsin another div:
如果您希望所有按钮都居中，则将其嵌套nav_buttons在另一个 div 中：
<div class="nav">
<div class="centerButtons">
<div class="nav_button">
<div class="b_left"></div>
<div class="b_middle">Home</div>
<div class="b_right"></div>
</div>
<div class="nav_button">
<div class="b_left"></div>
<div class="b_middle">Contact Us</div>
<div class="b_right"></div>
</div>
</div>
</div>
And style it this way:
并以这种方式设置样式：
.nav{
margin-top:167px;
width:1024px;
height:34px;
}
/* Centers the div that nests the nav_buttons */
.centerButtons {
margin: 0 auto;
float: left;
}
.nav_button{
height:34px;
margin-right:10px;
float: left;
}
回答by ott
when all else fails I just
当其他一切都失败时，我只是
<center> content </center>
I know its not "up to standards" any more, but if it works it works
我知道它不再“达到标准”，但如果它有效，它就有效
回答by Israr Awan
Consider adding this to your CSS to resolve the problem:
考虑将其添加到您的 CSS 以解决问题：
.btn {
width: 20%;
margin-left: 40%;
margin-right: 30%;
}
