Center a submit button div

Problem

I have styled a submit button and would like to center it. Here is the 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;
}

Here is the html:

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

I copied this code from http://www.scottking.com.au/blog/2009/03/custom-styled-css-html-input-buttons/#.Uc2IYdjcAix

So far have been unable to center align this button.

Problem courtesy of: Brian G

Solution

You can use display:inline-block; Compatibility goes back to IE 7 I think.

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

http://jsfiddle.net/AVtjQ/

EDIT: compatibility will go back to IE6 if you change your div to a naturally inline element like a span.

Solution courtesy of: Joseph Marikle

Discussion

margin-left: 50% margin-right: auto

I think this will work, you might need to fiddle with the percentage.

Discussion courtesy of: matthiasgh

In your CSS replace you code with this one

.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;
}
Discussion courtesy of: Naveen Kumar A

Add this to .buttons

.outer .buttons { margin: 0 auto; }
Discussion courtesy of: Jeevan Jose

Throw a

 div.buttons {
    text-align: center;
 }

in there.

Discussion courtesy of: Captain Skyhawk

Give .outer an auto margin and a width: http://jsfiddle.net/derekstory/Ctab4/

CSS

.outer {
    text-align: center;
    margin: auto;
    width: 200px;
}
Discussion courtesy of: Derek Story

This recipe can be found in it's original form on Stack Over Flow.