在图像的顶部放置一个图像

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>