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。这将使代码有效。

“保证金：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/

浮动中心按钮创建左浮动部分

2 个答案: