Floating center button created with floated left parts - css

Question

I have created a button with background image parts on the left, center and right. I would like to position it at the center of the page, but I can't do it.
I have simplified the example with simple color backgrounds instead of images.
HTML:
<a id="button" href="#">
<div id="b-left"></div>
<div id="b-center">Content</div>
<div id="b-right"></div>
</a>
CSS:
#button {
height: 40px;
margin: 0 auto;
}
#b-left, #b-right, #b-center {
display: inline;
float: left;
height: inherit;
}
#b-left {
background-color: blue;
width: 30px;
}
#b-right {
background-color: green;
width: 30px;
}
#b-center {
background-color: yellow;
}
Here's the demo:
http://jsfiddle.net/yh6sS/4/
Thanks a lot.

Answer 1

Replace all divs inside your link with spans. This will make the code to be valid.
"margin: 0 auto;" property only works, when there's a fixed width, for example 100px. So it can be deleted in your case.
Use the next technique to make all buttons: http://jsfiddle.net/2GJu2/
<div class="outer">
<a href="#">
<span class="b-left"></span>
<span class="b-center">Content</span>
<span class="b-right"></span>
</a>
</div>
.outer { text-align: center; }
a {
display: inline-block; margin: 0 10px; line-height: 30px;
position: relative; }
a span { display: inline-block; }
.b-center { background: yellow; }
.b-left,
.b-right { position: absolute; top: 0; width: 10px; height: 30px; }
.b-left { left: -10px; background: red; }
.b-right { right: -10px; background: green; }

Answer 2

Add text-align: center to a parent element, and add display: inline-block to #button.
See: http://jsfiddle.net/thirtydot/yh6sS/7/