Центр кнопки отправки 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/

EDIT: 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; 
}