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