파이어 폭스에서 수직 센터링이 작동하지 않습니다.

div를 세로로 가운데에 배치하려면 부모 컨테이너를 사용하고 있습니다.파이어 폭스에서 수직 센터링이 작동하지 않습니다.

그것은 사파리와 크롬하지만 파이어 폭스에서 작동합니다. 이 게시물을 보았습니다 : CSS vertical-align: middle not working하지만 차라리 테이블을 사용하지 않았 으면합니다.

내 CSS : .container 당신이 수직으로 중심을 원하는 것입니다 경우

.wrapper { 
    height: 100%; 
    max-width: 420px; 
} 
.wrapper:before, 
.container { 
    display: inline-block; 
    vertical-align: middle; 
} 
.wrapper:before { 
    content: ''; 
    display: inline-block; 
    width: 0; 
    height: 100%; 
    vertical-align: middle; 
    margin-left: -0.25em; 
} 
.container { 
    text-align: justify; 
    font-size: 12px; 
}

출처

2014-11-04 REELHERO

다음은 트릭 ;-)

.container { 
position: relative; 
top: 50%; 
transform: translateY(-50%); 
}

을 할 수있는 다음과 같습니다.

출처

2014-11-04 01:49:33 Chris

사파리 http://danacoleproducer.com/index_test1.html에는 없지만 이상하게도 애니메이션은 사파리에서 작동하지 않습니다. - – REELHERO

사파리의 애니메이션에 대해서는 잘 모릅니다. 먼저 코드에서 오류를 제거하여 작동하는지 확인하십시오. – Chris

사파리에서 근무하기 전에는 조건부 주석을 코드로 사용하고 파이어 폭스에서는 사용할 수 없으며 그 반대의 경우도 조건부 주석을 사용할 수 있습니다. 나쁜 점은 외부 CSS 파일에서 사용할 수 없다는 것입니다. – Chris

파이어 폭스에서 수직 센터링이 작동하지 않습니다.

답변

관련 문제