How to use CSS to center the buttons?

Question

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

Answer 1

The reason why you want to use CSS for styling instead of HTML tags, comes from a very important principle of all kinds of programming: Separation of concerns. You want to use HTML purely for structural objects in your web page, objects that you then can style and place purely with CSS. The reason for this is that as your project grows, keeping track of small "CSS-like fixes" (either inline-CSS or centre tags), where they are placed, and what does what, can get really difficult and frustrating for you as the developer. Therefore, try to keep all styling code in an external CSS document, all Javascript function declarations in another external document, and as pure HTML as possible in your other documents. You might not see the point for small projects, but this practice is a true lifesaver for more than trivial projects.

Update:

As to your other question: Why will

<center><a...></a></center>

center the the button, while

<a class="center">...</a>

won't?

That is because adding the class ="center" with the text-align:center to the a-element, will center the content inside the a-element, not the element itself. If you want center the whole a-element, you should encapsule the element with another tag, and center the content of that tag instead, like for instance:

<div class="center">
    <a ...>Buttontext</a>
</div>

This will center the content inside div-element. If the div element has full width, this would center the a-link in the middle.

Hope that helps!