トップ：50％;サファリ

Question

でマイページを働いていないことhttp://brand2o.com/experience.phpでのライブであり、私は垂直リンク内の画像を中心に、このCSSを使用しています：

img { 
    position: relative; 
    top: 50%; 
    width: 80%; 
    padding: 10%; 
    transform: translateY(-50%); 
} 

それは、FirefoxとChromeで適切に動作していますが、Safariは無視しているように見えますtop: 50%;と私はなぜか分からない。

ここでは、Activisionのロゴが強調表示されています。ご覧のとおり、すべての画像が遠すぎます。

Answer 1

このお試しください：

main #experienceLogos li a { 
    display: inline-flex; //switch from block display 
    width: 100%; 
    height: 100%; 
} 


main #experienceLogos li img { 
    position: relative; 
    /* top: 50%; Remove this*/ 
    width: 80%; 
    padding: 10%; 
    /* transform: translateY(-50%); Remove this */ 
    -webkit-align-self: center; //safari 7+ 
    align-self: center; 
}