Question

我想将播放按钮（第一个img）置于第二个图像的中心位置。我可以用绝对位置和保证金做到这一点，但这怎么可能是动态的呢？如果我在一个循环中并且第二个图像的高度并不总是相同怎么办？

<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设置为flex，并将播放按钮设置为自动边距。因此，该按钮始终位于框中。

这里有更好的解释：

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>

将图像置于图像顶部

4 个答案: