Centering a rollover button part of a division that has a background. CSS

Question

I have the following element:

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

Using this style:

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

What I am trying to achieve is to have the menubar center it's content and the buttons is a CSS-rollover. The problem is that the button, using this exact code stays aligned to the left instead of being center.

Solved (j08691):

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

Works: http://jsfiddle.net/j08691/WdQfk/1/

Answer 1

Add margin:0 auto; to .homebutton.

To center a block element it has to have a width (you have that) and you need to set the left and right margin to auto e.g. 0 auto;

jsFiddle example