html - 居中提交按钮 div

Question

我设计了一个提交按钮并希望将它居中。这是 CSS:

.outer {
    text-align: center;
}

/* BUTTONS */

.buttons button{
cursor: pointer;
cursor: hand;
border: 0;
height: 28px;
float: left;
text-indent: 4px;
text-decoration:none;
font-weight: bold;
text-transform: uppercase;
font-size: 1.2em;
background: url(../images/button.png);
}

.buttons span{ /* Right-hand corner */
cursor: pointer;
cursor: hand;
display: block;
width: 5px;
height: 28px;
float: left;
background: url(../images/button.png) top right;
}

这是 html:

<div class="outer">
   <div class="buttons">
      <button type="submit">SUBMIT</button><span></span>
   </div>
</div>

我从 http://www.scottking.com.au/blog/2009/03/custom-styled-css-html-input-buttons/#.Uc2IYdjcAix 复制了这段代码

到目前为止一直无法将此按钮居中对齐。

Answer 1

您可以使用 display:inline-block; 我认为兼容性可以追溯到 IE 7。

.outer .buttons {
    display:inline-block;
}

http://jsfiddle.net/AVtjQ/

编辑:compatibility will go back to IE6如果您将 div 更改为像 span 这样的自然内联元素。