Div dans une Div centrée

[defaliz]

bonjour

sur ce site  https://plantandstories.com/substrats-et-accessoires/446-grand-tapis-de-rempotage-de-plantes.html

j'ai mis une flèche sur la 2eme vignette pour indiquer que c'est une vidéo...

mais quand on se déplace dans les vignettes avec les flèches droite et gauche, la flèche de la vidéo se déplace également

comment la rendre fixe au milieu du container de la vidéo ?

j'ai déjà bien galéré pour placer la flèche..

voici un bout de mon code...

merci

 

<style>
 .img2 {
vertical-align: middle;
margin-left: auto;
margin-right: inherit;
position: absolute;
}
</style>

<div id="video_button_container">
<img class="thumb js-thumb" src="/img/cms/videos/{$product.custom_field_video|mb_substr:0:-4}.png"  width=80 height=100 alt="tapis" />
<img class="img2" src="https://plantandstories.com/img/cms/fleche_player.png" width="10%" >
 </div>