css - 将具有背景的分区的翻转按钮部分居中。CSS

Question

我有以下元素：

<div class="menubar">
    <a class="homebutton" href="mydomain.com/home"></a> 
</div>

使用这种风格：

.menubar {
    text-align:center;
    background-image:url(/img/menubar_background.png);
}

.homebutton
{
    display: block;
    width: 139px;
    height: 23px;
    background: url("/img/home_button_rollover.png") no-repeat 0 0;
}

.homebutton:hover
{ 
    background-position: 0 -23px;
}

我想要实现的是让菜单栏以它的内容为中心，而按钮是 CSS 翻转。问题是按钮，使用这个确切的代码保持与左对齐而不是居中。

已解决 (j08691)：

.homebutton
{
    display: inline-block;
    margin:0 auto;
    width: 139px;
    height: 23px;
    background: url("/img/home_button_rollover.png") no-repeat 0 0;
}

作品：http: //jsfiddle.net/j08691/WdQfk/1/

Answer 1

添加margin:0 auto;到.homebutton.

要使块元素居中，它必须有一个宽度（你有那个），你需要将左右边距设置为 auto 例如0 auto；

jsFiddle 示例