Flexbox centrage sur Safari
Le code suivant centres une vidéo verticalement et horizontalement dans google Chrome, et la plupart des navigateurs modernes, sauf pour Safari où il est juste centré verticalement:
<!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>
Ce que je fais mal?
Même code dans un violon: https://jsfiddle.net/netroworx/tyet04uz/
Si je sors de l': margin-right: auto; margin-left: auto; De .conteneur Chrome montre la même que Safari je ne pouvais pas trouver tout de bugs: github.com/philipwalton/flexbugs
Vous devrez peut-être ajouter un fournisseur de préfixes pour Safari: stackoverflow.com/a/35137869/3597276
Vous devrez peut-être ajouter un fournisseur de préfixes pour Safari: stackoverflow.com/a/35137869/3597276
OriginalL'auteur Greg Pagendam-Turner | 2016-07-22
Vous devez vous connecter pour publier un commentaire.
Supprimé la vidéo-conteneur de style et modifié d'autres styles:
Salut Toni, avez-vous des questions?
J'ai trouvé des réponses sur d'autres questions, comme il arrive - c'est mieux sur un Débordement de Pile à expliquer pourquoi comment vous avez résolu le problème - de cette façon, les OP et les autres lecteurs d'obtenir des connaissances utiles à l'extérieur de la portée du problème, plutôt que de couper et coller une solution, ils pourraient ne pas comprendre - par exemple, pour mon problème, qui est similaire mais pas identique à l'OP, ce n'était pas de l'utiliser car je ne sais pas lequel des bits de correction d'un problème dans la question, ou pourquoi
Cela ne fonctionne toujours pas.
OriginalL'auteur Greg Pagendam-Turner