상단 : 50 %; 사파리

Question

내 페이지 http://brand2o.com/experience.php에서 라이브 인에서 일하고, 나는 수직이 CSS를 사용하고 링크 내부의 이미지를 중심하지 : 그것은 파이어 폭스와 크롬에서 제대로 작동하고

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

을하지만, 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; 
}