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

我有以下要素：

<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/

最佳答案

将margin:0 auto;添加到.homebutton。

要使块元素居中，它必须具有宽度（您有宽度），并且需要将左右边距设置为自动，例如0 auto;

jsFiddle example