인 flexbox 사파리

을 중심으로 다음 코드는 크롬과 사파리를 제외한 대부분의 최신 브라우저에서 수직 및 수평 비디오 센터 그냥 수직으로 중심 여기서 내가 잘못 뭐하는 거지인 flexbox 사파리

<!DOCTYPE html> 
<html lang="en"> 
    <head>  
    <meta charset="utf-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->  
    <meta name="description" content="">  
    <meta name="author" content="">  
    <link rel="icon" href="favicon.ico">  
    <title>Rick 
    </title>  
    <!-- Bootstrap core CSS -->  

<!-- from bootstrap 4 --> 
    <style type="text/css"> 
    body { 
     font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 
     font-size: 1rem; 
     line-height: 1.5; 
     color: #373a3c; 
     background-color: #fff; 
    } 

    body { 
     margin: 0; 
    } 

    .container { 
     margin-right: auto; 
     margin-left: auto; 
    } 
    </style> 

<!-- site custom styles --> 
    <style> 

    body { 
     display: flex; 
     flex-direction: column; 
     min-height: 100vh; 
     margin: 0px; 
     overflow: hidden; 
    } 


    .content { 
     flex: 1 0 auto; 
     justify-content: center; 
     align-content: center; 
     display: flex; 
     flex-direction: column; 
     border: 10px solid pink; 
    } 

    .video-container { 
     height: 100%; 
     display: flex; 
     flex: 1 0 auto; 
     flex-direction: column; 
     justify-content: center; 
     align-content: center; 
    } 

    </style> 
    </head> 
    <body> 
    <!-- Begin page content -->  
    <div class="content container">  
      <div class="video-container">       
      <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&controls=0" frameborder="0" allowfullscreen=""> 
      </iframe>   
      </div>  
    </div>  
    </body> 
</html>

바이올린에

같은 코드 : https://jsfiddle.net/netroworx/tyet04uz/

출처

2016-07-22 Greg Pagendam-Turner

내가 꺼내 경우 자동; margin-left : 자동; 크롬 .container에서 사파리 와 같은 표시 나에서 모든 관련 버그를 찾을 수 없습니다 : HTTP : // 유래 당신은 사파리 공급 업체 접두사를 추가해야 할 수 있습니다 –

https://github.com/philipwalton/flexbugs을. com/a/35137869/3597276 –

-3

제거 비디오 컨테이너 스타일과 다른 스타일을 변경 : 마진 오른쪽 :

body { 
     display: -webkit-box; 
     display: -ms-flexbox; 
     display: flex; 
     -webkit-box-orient: vertical; 
     -webkit-box-direction: normal; 
     -ms-flex-direction: column; 
     flex-direction: column; 
     min-height: 100vh; 
     margin: 0px; 
     overflow: hidden; 
     } 


     .content { 
     display: -webkit-flex; 
     display: flex; 
     -webkit-flex-direction: row /* works with row or column */ 
     flex-direction: row; 
     -webkit-align-items: center; 
     align-items: center; 
     -webkit-justify-content: center; 
     justify-content: center; 
     border: 10px solid pink; 
     }

출처

2016-07-26 00:44:36

왜이 대답이 미래 개발자에게별로 도움이되지 않는지를 설명하려는 시도가 없습니다. –

안녕하세요. Toni, 질문이 있습니까? –

다른 질문에 대한 답변을 찾았습니다. 스택 오버플로에서 문제를 해결 한 이유를 설명하는 것이 가장 좋습니다. OP 및 다른 독자는 문제의 범위 밖에서 유용한 정보를 얻으 려합니다. 그리고 그들이 이해하지 못할 수도있는 붙여 넣기 해결책 - 예를 들어 OP에서와 비슷하지만 유사하지 않은 내 자신의 문제에 대해, 어떤 비트가 문제의 문제를 해결했는지 또는 왜 –

인 flexbox 사파리

답변

관련 문제