how to center a button with css and html - css

Question

i want to center one button up and the other down. how can i edit my css to achieve this.here is
css-
#ContactForm .button {
margin-left:8px;
margin-left:9px;
float:right;
margin-right:2px;
font-size:20px;
font-weight:700;
color:#fff;
line-height:35px;
width:90px;
text-align:center;
background:url(../images/button_form.gif) top repeat-x #308da2;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;behavior:url(js/PIE.htc);
position:relative;
text-decoration:none
}
html-
<div>
send
clear
</div>

Answer 1

Here's a jsfiddle with what you want.... http://jsfiddle.net/xgdVM/
you can set the text-align of the container to center
and set the display property of the buttons to block..
CSS:
#form{text-align:center;}
a{display:block;}​
HTML
<div id="form">
send
clear
</div>​
OR if your buttons have a set witdth i.e width:70px; then you can just give them the css property margin:0 auto; and they will be centered by applying equal margins to the left and right
http://jsfiddle.net/xgdVM/2/

Answer 2

If you mean center horizontally:
#ContactForm .button {
margin: 0 auto; /* centers, provided there's a width set */
display: block;
font-size:20px;
font-weight:700;
color:#fff;
line-height:35px;
width:90px; /* width set */
text-align:center;
background:url(../images/button_form.gif) top repeat-x #308da2;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;behavior:url(js/PIE.htc);
position:relative;
text-decoration:none
}