Question

这是按钮：

.button {
width: 210px;
background-color: lightgray; /* Green */
border: none;
color: white;
padding: 15px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}

我试过这个：

input.button {
margin: 0 auto;
}

而且：

#buttonone {
margin-left: auto;
margin-right: auto;
}

还有很多其他的事情。我究竟做错了什么？谢谢。

Answer 1

使用display:block和margin:0 auto它应该可以正常工作：

.button {
margin:0 auto;
display:block;

width: 210px;
background-color: lightgray;
border: none;
color: white;
padding: 15px 20px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
}

<button class="button">Button</button>

Answer 2

另一种方法：

window.update()

//<![CDATA[
/* external.js */
// You should always use exteral code, when possible, for caching reasons.
var doc, bod, I, old = onload; // for use on other loads
onload = function(){
if(old)old(); // change old var name if using technique on other pages
doc = document; bod = doc.body;
I = function(id){
  return doc.getElementById(id);
}
var out = I('out');
I('btn').onclick = function(){
  out.innerHTML = 'Wow, you clicked the button!';
}
}
//]]>

/* external.css */
html,body{
  padding:0; margin:0;
}
body{
  background:#000; overflow-y:scroll;
}
.main{
  width:936px; background:#fff; padding:20px; margin:0 auto;
}
.cntr{
  text-align:center;
}
#btn{
  width:210px; background:lightgray; color:white;
  font-size:16px; padding:15px 20px; border:0; cursor:pointer;
}

无法使此按钮居中对齐

2 个答案: