Question

我想在我的视频缩略图上附加播放按钮（用CSS制作），但我有问题。在小型设备上看起来像：

但如果我想扩大我的窗口，它看起来像：

1：无论我是否扩大窗口，都可以选择将其严格设置在此缩略图的中心位置？

    .video img
    {
    	width: 100%;
    }
    
    .play-button-outer {
      margin: 25% auto;
      width: 50px;
      height: 50px;
      background-color: #fe6a00;
      cursor: pointer;
      border-radius: 50%;
      position: relative;
      top: -185px;
      left: 20px;
    }
    
    .play-button {
      margin: 0 auto;
      top: 30%;
      position: relative;  
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 9px 0 12px 17px;
      border-color: transparent transparent transparent #FFF;
      opacity: .75;
    }
    
    .play-button-outer:hover .play-button {
      opacity: 1;
    }

        <div class="video">
			<img src="img/video-thumb.png">
			<div class="play-button-outer">
  				<div class="play-button"></div>
			</div>
		</div>

Answer 1

这是你想要的吗？

我已经确定了.play-button-outer 绝对和

的位置

 top: 50%;
 left: 50%;
 transform:translate(-50%,-50%);

上述行将确保它始终保持在视频的中心（垂直和水平）。

此外，您还需要设置.video 亲戚

的位置

＆＃13;

.video img {
  width: 100%;
  position: relative;
}

.video {
  position: relative;
}

.play-button-outer {
  width: 50px;
  height: 50px;
  background-color: #fe6a00;
  cursor: pointer;
  border-radius: 50%;
  position: relative;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.play-button {
  margin: 0 auto;
  top: 30%;
  position: relative;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 0 12px 17px;
  border-color: transparent transparent transparent #FFF;
  opacity: .75;
}

.play-button-outer:hover .play-button {
  opacity: 1;
}

＆＃13;

<div class="video">
  <img src="https://placehold.it/200x200">
  <div class="play-button-outer">
    <div class="play-button"></div>
  </div>
</div>

＆＃13;

Answer 2

这是一种可重复使用的标准方式，可以垂直和水平对中：

position: absolute;
top: 50%; /* this percentage relates to the parent element */
left: 50%; /* this percentage relates to the parent element */
transform: translate(-50%, -50%); /* this percentage relates to the element itself */

请注意，为了使其按照您期望的方式工作，需要定位父容器（即，它不能具有position: static;这是默认值。

.video img {
  position: relative;
  width: 100%;
}

.play-button-outer {
  width: 80px;
  height: 80px;
  background-color: #fe6a00;
  cursor: pointer;
  border-radius: 50%;
  opacity: .75;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity .2s ease;
}

.play-button {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 0 12px 17px;
  border-color: transparent transparent transparent #FFF;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% + 2px), -50%);
}

.play-button-outer:hover {
  opacity: 1;
}

<div class="video">
  <img src="http://placekitten.com/1600/900">
  <div class="play-button-outer">
    <div class="play-button"></div>
  </div>
</div>

在缩略图上附加播放按钮

2 个答案: