Как сверстать картинку на картинке (адаптив)?

Question

[Алексей Карпань]

Вот код:

<div style="width:100%; height: 100%; position: relative;">	
				<img src="/wp-content/uploads/2015/04/ban.jpg" alt="фон в шапке" style="width:100%" />
				<div style="position:absolute; right:500px; top:250px; height:70px;">
					<a href="#"><img src="/wp-content/uploads/2015/04/iconka.gif"  style="height:80px"/></a>
				</div>
</div>

Суть такая, в шапке есть картинка ban.jpg, на фоне этой картинки нужно сделать iconka.gif, да так, чтобы при изменении разрешения iconka.gif не уползала ни вверх ни в низ, и была пропорционально посредине внизу на фоне картинки ban.jpg. Как такое реализовать? На данный момент при изменениии разрешения картинка iconka.gif уплывает вниз.

Answer 1

[westdp]

Первая картинка бекграундом, вторая можешь сделать как написал Pavel Torbeev , но есть более универсальный подход, где не нужно знать размеры картинки:

.center {
    position:absolute;
    top:50%;
    left:50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); 
}

Answer 2

[Stalker_darkway]

Первую картинка бэкграундом, вторую без абсолютного позиционирования. margin: 0 auto; Ну можно еще Inline-block сделать.

Answer 3

[Pavel Torbeev]

Универсальное решение для выравнивания по середине для объектов с абсолютным позиционированием (если известны размеры, например, 80х80):

.center {
    position:absolute;
    top:50%;
    left:50%;
    margin-left: -40px; //смещаем на половину ширины
    margin-top:-40px; //смещаем на половину высоты
}