Centering Buttons in a Form

[DVigneault]

Hey all--more trouble styling my forms.

 

Here's the HTML:

<div id="wrapper">
<form>
<fieldset>Some stuff</fieldset>
<div id="buttons">
<button>Submit</button>
<button>Reset</button>
</div>
</form>
</div>

 

And the CSS:

div#wrapper {
width: 800px;
margin-left: auto;
margin-right: auto;
}

#buttons {
display: inline;
margin-left: auto;
margin-right: auto;
}

 

I'd like for the "buttons" div to be centered within the 800px "parent" div, but instead it stays against the left side.  I can get it to look roughly how I want by setting margin-left to 300px or so, but I'd really just like it centered (and to know why setting the margins to auto isn't having the effect I thought it'd have).  Any ideas about what I'm doing wrong?

 

Best,

 

-d

[Mahngiel]

the buttons won't center because they are not block-level elements.  Much like a <span> that that only responds natively to font-based properties (size, iine-height). 

 

Anyway, you have it wrapped in a div, so just set the div to have centered text.

 

http://jsfiddle.net/svjVX/

[DVigneault]

Thanks so much!  That worked perfectly.  And jsfiddle is pretty cool--I should use that next time I post.