动态高度上的中心css

Question

我想将播放按钮（第一个img）居中放置在第二个图像上。我可以用绝对位置和边缘位置来做到这一点，但这怎么可能是动态的？如果我在一个循环中，第二个图像的高度并不总是一样的话呢？

<img 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"/> 

Answer 1

有两个解决方案做到这一点

1）把段落标记之间的图像，并给予风格的那款“文本对齐：中心;”，就像下面

<p style="text-align:center"><img src="#url to your image"/></p>

2）给出的风格到IMG标签保证金：0px auto的，就像下面

<img src="#url to your image" style="margin:0px auto;"/>

Answer 2

你将需要添加父的图像和游戏图像定位绝对和设置左上50％，并创下负利润率表演图像，这样的宽度，它的一半垂直对齐和水平

div { 
 
    margin: 30px; 
 
    position: relative; 
 
    border: 1px solid red; 
 
} 
 
img.main { 
 
    width: 100%; 
 
    height: auto; 
 
    vertical-align: middle; 
 
} 
 
img.play { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin: -63px 0 0 -63px; 
 
} 
 
.second .main { 
 
    height: 400px; 
 
}

<p>with smaller height</p> 
 

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

 
<p>with larger height</p> 
 

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