центр изображения в верхней части изображения

Question

Я хочу, чтобы кнопка воспроизведения (первая img) была сфокусирована на втором изображении. Я могу сделать это с абсолютной позицией и маржой, но как это может быть динамично? Что делать, если я в цикле, а высота второго изображения не всегда одинакова?

DEMO http://jsfiddle.net/yusuuqck/

<div> 
    <img class="ply" src="http://maxcdn.clubcooee.com/img/icons/play-button2.png"/> 
<img src="http://www.howtorecordpodcasts.com/wp-content/uploads/2012/10/YouTube-Background-Pop-4.jpg"/> 
</div> 

Answer 1

Не могли бы вы установить второе изображение как фон и содержащий DIV dislpayed, как прогибается, а кнопка воспроизведения с маржинальной авто. Таким образом, эта кнопка всегда центрируется в поле.

Здесь лучше объяснить:

http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Answer 2

это может помочь

<div class="bg_img"> 
    <img src="http://www.howtorecordpodcasts.com/wp-content/uploads/2012/10/YouTube-Background-Pop-4.jpg"> 
    <span></span> 
</div> 

CSS

.bg_img { position: relative; } 

.bg_img span { 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    z-index: 1; 
    background: url(http://maxcdn.clubcooee.com/img/icons/play-button2.png) no-repeat center center; 
} 

Answer 3

Используйте Див дисплей в качестве ячейки таблицы.

http://jsfiddle.net/yusuuqck/2/

HTML

<div> 
    <img class="ply" src="http://maxcdn.clubcooee.com/img/icons/play-button2.png"/> 
    <img src="http://www.howtorecordpodcasts.com/wp-content/uploads/2012/10/YouTube-Background-Pop-4.jpg"/> 
</div> 

CSS

div { 
    position:relative; 
    width:100%; 
    height:100%; 
    display: table-cell; 
} 

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

Answer 4

Проверить этот код.

div{ 
 
    position:relative; 
 
    display:flex; 
 
    img{ 
 
     width:100%; 
 
     height:auto; 
 
    } 
 
} 
 

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

<div> 
 
    <img class="ply" src="http://maxcdn.clubcooee.com/img/icons/play-button2.png"/> 
 
<img src="http://www.howtorecordpodcasts.com/wp-content/uploads/2012/10/YouTube-Background-Pop-4.jpg"/> 
 
</div>