Изображение над изображением, средняя позиция

Question

Это мой класс CSS:

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

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

Мой HTML:

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

Проблема в том, что я не могу сделать из тега img, в середине фона overitem класса. Что я должен сделать, чтобы он появился в середине bg.png изображения?

Answer 1

Вы можете установить поля как 1/2 (ширина "overitem" минус ширина "sit") и 1/2 (высота "overitem" высота ширина "sit") или попробуйте это:

.sit {
    position: absolute; 
    top: 50%;
    left: 50%;
    margin-left: -(HALF_OF_WIDTH_OF_IMAGE);
    margin-top: -(HALF_OF_HEIGHT_OF_IMAGE);
}

Answer 2

Поскольку класс .sit должен иметь фиксированную ширину и высоту (потому что это изображение), вы можете использовать следующий метод:

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

Источник: http://css -tricks.com / snippets / css / Абсолютный центр-Вертикальный-Горизонтальный-an-image /

Answer 3

В классе .sit вам необходимо иметь:

margin-left: -(half of width);
margin-top: -(half of height);

Альтернативный вариант:

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

.sit { 
    vertical-align: middle;
} 

Answer 4

Попробуйте это:

elems = document.getElementsByClassName('sit');
for( i = 0, j = elems.length; i < j; i++){
    elems[ i ].style.marginLeft = ( elems[ i ].parentNode.offsetWidth - elems[ i ].offsetWidth ) / 2;
    elems[ i ].style.marginTop = ( elems[ i ].parentNode.offsetHeight - elems[ i ].offsetHeight ) / 2;
}