当屏幕尺寸缩小时，如何让播放按钮图标保持居中在图像上？

Question

这是问题的一个截图：

我使用本教程中的说明，了解如何把一个播放按钮在动画GIF：http://www.hongkiat.com/blog/on-click-animated-gif/

对于这个工作，但在大多数情况下当屏幕尺寸变为移动时，我无法让播放按钮保持居中。

我使用这个主题（雨果）：https://github.com/tomanistor/osprey

我猜我需要包含图像和表或玩的东西按钮图标？本教程的例子已经包含在一个DIV的图像，但是当我尝试，我失去了播放按钮：

<div class="demo-content"> 
<figure> 
<img src="/images/image-placeholder.jpg" alt="Static Image" data-alt="/images/animated-gif.gif"> 
</figure> 
</div> 

我目前使用下列以获得这两个占位符和播放图像：

<figure> 
<img src="/images/image-placeholder.jpg" alt="Static Image" data-alt="/images/animated-gif.gif"> 
</figure> 

我试着打开我的浏览器的开发工具，玩弄风格的价值观，但它感觉像一个鼹鼠。

这里是我已经加入到主题CSS的一个片段：

. 
. 
. 
@font-face { 
    font-family: 'font-awesome'; 
    font-style: normal; 
    font-weight: 700; 
    src: url(https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/fonts/fontawesome-webfont.ttf) format("truetype") 
} 
. 
. 
. 
figure { 
    width: 100%; 
    margin: 0; 
    float: left; 
    padding: 10px; 
    position: relative; 
    cursor: pointer; 
} 
figure:before, 
figure:after { 
    position: absolute; 
} 
figure:before { 
    top: 206px; 
    left: 50%; 
    margin-left: -50px; 
    width: 100px; 
    height: 100px; 
    border: 3px solid rgba(255, 255, 255, 0.7); 
    border-radius: 50px; 
    background-color: rgba(204, 209, 217, 0.3); 
    font-family: 'font-awesome'; 
    content: '\f04b'; 
    text-align: center; 
    line-height: 95px; 
    font-size: 30px; 
    color: #182230; 
} 
figure:after { 
    position: absolute; 
    display: inline-block; 
    width: auto; 
    text-align: center; 
    top: 20px; 
    right: 20px; 
    font-size: 11px; 
    font-weight: 600; 
    padding: 5px; 
    border-radius: 3px; 
    color: #656D78; 
    background-color: rgba(170, 178, 189, 0.1); 
    text-transform: uppercase; 
} 
figure.play:before { 
    display: none; 
} 
figure.play:after { 
    content: 'playing'; 
    color: #fff; 
    background-color: #212121; 
    text-transform: uppercase; 
} 
figcaption { 
    padding-top: 15px; 
    font-size: 14px; 
    text-align: center; 
    color: #8d9bad; 
} 
figcaption a { 
    color: #59687b; 
    text-decoration: none; 
} 

我怎样才能让我的播放按钮，在教程示例保持完全相同中心怎么样？

Answer 1

更改figure:before到top: 50%保持它从最高的50％，然后删除您margin-left和使用transform: translate(-50%,-50%)代替，这将元素向左移动和高达50％，它自己的宽度/高度。 margin-left: -50px与您的示例中的translateX(-50%)相同，但使用transform: translate()更简单。

figure:before { 
    top: 50%; 
    left: 50%; 
    /* margin-left: -50px; */ 
    width: 100px; 
    height: 100px; 
    border: 3px solid rgba(255, 255, 255, 0.7); 
    border-radius: 50px; 
    background-color: rgba(204, 209, 217, 0.3); 
    font-family: 'font-awesome'; 
    content: '\f04b'; 
    text-align: center; 
    line-height: 95px; 
    font-size: 30px; 
    color: #182230; 
    transform: translate(-50%,-50%); 
}