18008 sujets

Questions générales et questions de débutants

[Résolu] Probleme centrage div avec flexbox que sur safari

Bonjour à tous Smiley biggrin
débutant dans le domaine du HTML et CSS, j'essaye divers choses pour voir ce que ça donne, et là, je bute sur le centrage verticale et horizontale d'une div dans une div.
Le problème d'affichage se produit que sur safari.
Ci-dessous mauvais affichage safari:

upload/63636-Capture2.PNG

Et dessous, le bon affichage:

upload/63636-Capture1.PNG

Donc, si quelqu'un peut me donner une astuce ou un conseil, je suis preneur Smiley biggrin
Mon HTML:


        <div id="conteneur">
            <div id="conteneur2"></div>
        </div>


Mon CSS:


#conteneur{
    background-color: #2E4053;
    height: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#conteneur2{
    background-color: #AEB6BF;
    height: 920px;
    width: 940px;
    display: flex;
    justify-content: center;
    align-items: center;
}


Merci d'avance pour vos réponses Smiley cligne
Je n'ai pas de quoi tester sous la main. Vous avez essayé avec les différents préfixes ?

J'ai arrangé un peu le code pour qu'il soit responsive :
#conteneur{
    background-color: #2E4053;
    height: 1000px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 1rem; /* pour le responsive, mais ce n'est pas obligatoire */
}

#conteneur2{
    background-color: #AEB6BF;
    height: 920px;
    width: 100%; /* Il est là le truc pour le responsive */
    max-width: 940px; /* Et là aussi */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
Bonjour Olivier C
Je viens de tester votre code et miracle, ça fonctionne.
Je n'est pas tester différents préfixes par ce que je ne me suis pas encore penché sur le sujet.
Je sais désormais ce qu'il me reste a faire. Idem pour le responsive Smiley ohwell
j'en suis encore qu'au début du début et il me reste tellement de choses à voir.
En tout cas merci à vous pour votre réponse rapide et je sais maintenant grâce a vous, que je peux compter sur ce forum ainsi que ses membres pour mes futures questions.
encore merci Smiley cligne
Modifié par yellowleader (10 Jan 2017 - 19:41)
Alors, honnêtement, ces préfixes je ne les connais pas par cœur. J'utilise un script qui me permet de les générer en fonction des navigateurs les plus utilisés : Autoprefixer.
Olivier C a écrit :
Alors, honnêtement, ces préfixes je ne les connais pas par cœur. J'utilise un script qui me permet de les générer en fonction des navigateurs les plus utilisés : Autoprefixer.


Merci pour l'info.
je vais tester.
Sujet clos
Aller à