플렉스 박스 : 정렬 - 자기 : 센터가 위치와 함께 작동하지 않습니다 : Firefox에서 수정

Firefox에서 div를 flexbox와 수평으로 정렬하는 데 문제가 있습니다. Chrome에서 정상적으로 작동합니다. 플렉스 박스 : 정렬 - 자기 : 센터가 위치와 함께 작동하지 않습니다 : Firefox에서 수정

이

코드입니다 :

<header id="header"> 
    <p class="small-hidden">I am</p> 
    <h1>Håkan</h1> 
    <p>web designer from Sweden, living in the Basque Country, Spain</p> 
    <div class="contact-icons"> 
     <a href="#.com"><i class="mi mi-Mail"></i></a> 
     <a href="#"><i class="mi mi-whatsapp"></i></a> 
     <a href="#contact"><i class="mi mi-PenPalette"></i></a> 
    </div> 
</header>  
-------------------------------------------------------------------------- 

header { 
    background-image: url(../img/hakan_mobile.jpg); 
    background-size: cover; 
    height: 70vh; 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-end; 
    align-items: center; 
    color: #777; 
    } 
@media only screen and (min-width: 40em) { 
    header { 
    background-image: url(../img/hakan.jpg); 
    height: 100vh; 
    width: 40vw; 
    position: fixed; 
    background-position: center; 
    justify-content: center; 
    } 
    } 
.contact-icons { 
    position: fixed; 
    top: 0; 
    } 
@media only screen and (min-width: 40em) { 
    .contact-icons { 
    bottom: 2rem; 
    top: inherit; 
    } 
    }

내가하고 싶은 것은 헤더의 아래 부분에있는 텍스트 (P + H1 + p)를 배치하고, 링크가 중앙에 고정되어야한다 작은 화면의 화면 상단과 큰 화면의 하단 중앙 하지만 position: fixed (모바일에서 스크롤 할 때 화면 상단에 링크를 표시하는 데 필요함)을 사용하면 .contact-icons은 가로로 가운데가되지 않습니다. 비록 내가 position: fixed을 제거하면 작동합니다.

컨테이너에 align-items: center을, 에 align-self: center을 시도했지만 동일한 결과가 나타납니다.

크롬이 제대로 작동하지만 Firefox에서 작동하지 않습니다. 어떤 제안?

바이올린 : 여전히 https://jsfiddle.net/1qrqxd7m/

거의 중앙에 보이는 바이올린에

있지만. 내 작업 카피에서 그것은 중심에서 벗어난 것처럼 보입니다.

출처

2017-03-01 Håkan

나는 것 glady 도움을,하지만 당신은 어딘가에 조각을 설정할 수 있습니다

그냥이와 전체 페이지와 관련하여 수평으로 중심? 예를 들어 코드를 SCSS로 다시 포맷하고 jsfiddle에 넣으시겠습니까? 또한'bp-large' 란 무엇입니까? 조금이라도 청소할 수 있습니까? – Senthe

죄송합니다! CSS로 채택하고 피들을 추가했습니다. –

Firefox의 "position : sticky;

출처

2017-03-01 08:09:30 grinmax

감사하지만 도움이되지 않습니다 ... –

@ Håkan https://jsfiddle.net/1qrqxd7m/ 크롬과 파이어 폭스에서 동일하게 보입니다 ( – grinmax

예, 지금은 ... 그러나 그것은 여전히 좋지 않은 작업 프로젝트입니다. 아마도 다른 것이 충돌 할 수 있습니다 ... –

을 사용하고 있기 때문에 flex 컨테이너의 스타일은 실제로 .contact 아이콘 위치 지정에 영향을주지 않습니다.

position: fixed 
left: 50% 
transform: translateX(-50%)

출처

2017-03-01 08:46:43 Senthe

내 잘못 ... 헤더가 큰 화면 (그러나 40vw)의 전체 너비가 아니며 이것을 사용하면'. 연락처 아이콘을 전체 화면에 표시합니다. 또한 작은 크기에서는'.contact-icons'의 아이콘이 50 %에서 시작하여 서로의 스택 온 ... –

40vw 인 경우'left : 20vw'를 설정하면됩니다. contact-icons이 스 니펫은 보편적이며 모든 경우에 부모 컨테이너의 절반에 '왼쪽으로'설정 한 다음 'transform : translateX (-50 %)'와 같이 사용할 수 있습니다. – Senthe

상상할 수있는 방식으로 작동하지 않습니다. ... 중심에 있지 않지만'.contact-icons' 컨테이너는 50 %에서 시작합니다. –

플렉스 박스 : 정렬 - 자기 : 센터가 위치와 함께 작동하지 않습니다 : Firefox에서 수정

답변

관련 문제