Partage

Problème Flex Firefox

11 janvier 2018 à 23:58:59

Hello, j'ai un soucis de flex sur firefox, j'ai un bout de code qui est censé donc centrer des images dans une div.

Je l'ai donc fait avec un flex dans le css, or sur Chrome ça marche nickel, mais sur Firefox j'ai mon "a" qui dépasse les image est donc les décale (le cadre rouge représente la Taille du a qui est trop longue sur firefox alors que sur Chrome elle s'adapte parfaitement)

Comment faire en sorte que ça passe sur firefox ?

Version Firefox :

Version Chrome avec le même Code :

Code complet de la page HTML :

<!DOCTYPE html>
<html>
    <head>
        <title>Event Gaming Army</title>
        <meta charset="UTF-8">
        <meta name="description" content="Site Web dédié à la communauté/structure Gaming Army">
        <meta name="keywords" content="Gaming Army, Gaming, Army, Esport, Structure français, PUBG, Playerunknown battleground">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="author" content="Thomas TARTAS">
        <link href="CSS/stylegeneral.css" rel="stylesheet" type="text/css"/>
        <link href="CSS/event.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <nav>
            <ul>
                <li><a href="index.html">Accueil</a></li>
                <li><a href="equipe.html">L'équipe</a></li>
                <li><a href="video.html">Nos Vidéo</a></li>
                <li><a href="planning.html">Planning</a></li>
                <li><img class="logo_ga" src="img/logo.jpg" alt="Logo GA"/></li>
                <li><a href="event.html">Evenements</a></li>
                <li><a href="recrutement.html">Recrutement</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li class="logo_nav_discord"><a class="link" href="https://discord.me/gamingarmypubg" target="_blank"></a></li>
                <li class="logo_nav_twitter"><a class="link" href="https://twitter.com/Gaming_ArmyPUBG" target="_blank"></a></li>
            </ul>
        </nav>
        <section>
            <h2>Evenement à venir</h2>
            <div class="event_pass">
                <a href="" target="">
                    <img src="img/saison1.png" alt="GLL PUBG"/>
                </a>
                <a class="seperate" href="" target="">
                    <img src="img/wingman.png" alt="Chicken Cup #2"/>
                </a>
            </div>
            <h2>Evenement passé</h2>
            <div class="event_pass">
                <a href="https://gamewave.fr/pubg/competition/tribe-battlegrounds-1/classement-1/" target="_blank">
                    <img src="img/tribepubg.jpg" alt="Tribe PUBG"/>
                </a>
                <a class="seperate" href="https://gamewave.fr/pubg/competition/chicken-cup-obsidius-2/classement-2/" target="_blank">
                    <img src="img/chickencup2.jpg" alt="Chicken Cup #2"/>
                </a>
            </div>
        </section>
        <footer>
            <ul class="txt_footer">
                <li>2018 Copyright GamingArmy</li>
                <li>version 0.1</li>
            </ul>
        </footer>
    </body>
</html>



Code complet de la feuille de style dédié à l'intérieur de la page (donc pas le nav, pas le footer) :

h2 {
    text-align: center;
    font-size: 50px;
    padding-left: 0px;
}

.event_pass {
    height: 150px;
    margin: auto;
    margin-top: 15px;
    /*width: 582px;*/
    display: flex;
    justify-content: center;
}

.event_pass img {
    height: 100%;
}

.seperate {
    margin-left: 10px;
}



Vous êtes demandeur·se d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur·se web junior

Je postule
Formation
courte
Financée
à 100%

Problème Flex Firefox

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown