top：50％;在Safari

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