在圖像的頂部放置一個圖像

Question

我想將播放按鈕（第一個圖像）放到第二個圖像的中央。我可以用絕對位置和邊緣位置來做到這一點，但這怎麼可能是動態的？如果我在一個循環中，第二個圖像的高度並不總是一樣的話呢？

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

使用DIV顯示爲表格單元格。

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>