當屏幕尺寸縮小時，如何讓播放按鈕圖標保持居中在圖像上？

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