How to use CSS to center the buttons?

How to use CSS to center the buttons?

Here's my fiddle for reference.
And here's the html mark up to create a line break and center the
"Compare" button
<p><center><a class="awesome medium orange"
href='#'>Compare</a></center></p><center><span style="font-size:
xx-small;">Sold by someone</span>
Do you prefer using css instead of the tags? Should I add two extra
classes like .center.awesome and .linebreak.awesome to do the job?
I have tried something like
.center.awesome{
text-align:center;
margin: 0px auto 0px auto;
}
but it doesn't work.
CSS reference:
.awesome{
background: #222 url() repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
}
.medium.awesome {
font-size: 13px;
}
.orange.awesome {
background-color: #ff5c00;
}