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）将该图像放在段落标记之间，并为该段落提供样式＆＃34; text-align：center;＆＃34;，如下所示

＆＃13;

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

＆＃13;

2）给img标签边距赋予样式：0px auto，就像下面的

一样

＆＃13;

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

＆＃13;

Answer 2

您需要为图像添加父级并将播放图像置于绝对位置并将其设置为左上角50％并将负边距设置为播放图像宽度的一半，以使其垂直和水平对齐

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

中心css在动态高度

2 个答案: