Плавающая центральная кнопка, созданная с плавающими левыми частями

Question

Я создал кнопку с частями фонового изображения слева, по центру и справа.Я хотел бы разместить его в центре страницы, но не могу этого сделать.

Я упростил пример с простыми цветными фонами вместо изображений.

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

Вот демо: http://jsfiddle.net/yh6sS/4/

Большое спасибо.

Answer 1

Замените все div внутри вашей ссылки на span. Это сделает код действительным.

"поле: 0 авто;" свойство работает только при фиксированной ширине, например 100px. Так что это может быть удалено в вашем случае.

Используйте следующую технику для создания всех кнопок: 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

Добавьте text-align: center к родительскому элементу и добавьте display: inline-block к #button.

См .: http://jsfiddle.net/thirtydot/yh6sS/7/