似乎无法弄清楚为什么这段代码不起作用。我希望按钮位于页面底部的中央。我有让它们位于页面底部的代码，但我就是无法让它们居中。除非我使用，但“感觉”不像这样做的方式。
参见 JSFiddle 上的示例:http://jsfiddle.net/c99Hh/2/
HTML:
<div id ="footer" style="margin:auto">
<div class="nails-footer-buttons">But01</div>
<div class="nails-footer-buttons">But02</div>
<div class="nails-footer-buttons">But03</div>
<div class="nails-footer-buttons">But04</div>
</div>
CSS:
#footer{
position: fixed;
bottom: 0;
width: 100%;
}
.nails-footer-buttons {
-moz-box-shadow:inset 0px 1px 0px 0px #c1ed9c;
-webkit-box-shadow:inset 0px 1px 0px 0px #c1ed9c;
box-shadow:inset 0px 1px 0px 0px #c1ed9c;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #9dce2c), color-stop(1, #8cb82b) );
background:-moz-linear-gradient( center top, #9dce2c 5%, #8cb82b 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dce2c', endColorstr='#8cb82b');
background-color:#9dce2c;
-webkit-border-top-left-radius:15px;
-moz-border-radius-topleft:15px;
border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
-moz-border-radius-topright:15px;
border-top-right-radius:15px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0;
border:1px solid #83c41a;
display:inline-block;
color:#ffffff;
font-family: 'Lato', sans-serif;
font-size:15px;
font-weight:bold;
font-style:normal;
height:60px;
line-height:60px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #689324;
width: 70px;
}
非常感谢提示。
最佳答案
将样式 text-align:center 应用于页脚元素或 CSS。
<div id ="footer" style="margin:auto;text-align:center;">
关于html - 将可扩展的 div block 居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20814740/