Question

This is my CSS class:

.overitem {
    position: relative; 
    background: url(images/bg.png) no-repeat; 
    width:83px;
    height: 83px;
}

.sit {
    position: absolute; 
    top: 50%; 
    left: 50%;
}

My HTML :

<div class="overitem"><img src="/images/vcs.png" class="sit"/></div>

The problem is that I can not make the from the img tag, in a middle of the background of overitem class. What should I do, to make it appear in the middle of the bg.png image?

Answer 1

Since the .sit class has to have a fixed width and height (because its an image), you can use the following method:

    .sit {
       position: absolute;
       top: 50%;
       left: 50%;
       width: 500px;
       height: 500px;
       margin-top: -250px; /* Half the height */
       margin-left: -250px; /* Half the width */
    }

Source: http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/