居中提交按鈕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來像一個跨度自然行內元素。

Answer 2

一下添加到.buttons

.outer .buttons { margin: 0 auto; } 

Answer 3

在那裏投擲

div.buttons { 
    text-align: center; 
} 

。

Answer 4

給。 outer自動保證金和寬度：http://jsfiddle.net/derekstory/Ctab4/

CSS

.outer { 
    text-align: center; 
    margin: auto; 
    width: 200px; 
} 

Answer 5

保證金左：50％ 保證金權：汽車

我認爲這會工作，你可能需要用撥弄百分比。

Answer 6

在你的CSS代替你的代碼與這一個

.outer { 
    text-align: center; 
    margin: auto; 
    width: 200px; 
} 

/* 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; 
}