CODEWITHSUNDEEP
csscss-float
Menda
Menda

Reputation: 1813

Floating center button created with floated left parts

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.

Upvotes: 1

Views: 739

Answers (2)

Arsen K.
Arsen K.

Reputation: 5660

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

Upvotes: 3

thirtydot
thirtydot

Reputation: 228162

Add text-align: center to a parent element, and add display: inline-block to #button.

See: http://jsfiddle.net/thirtydot/yh6sS/7/

Upvotes: 1

Related Questions