Bonjour,

Je suis en ce moment, en train de réaliser la page d'acceuil de mon site. Cependant sur le shéma ci-dessous, lorsque je vais ajouter les trois petit titre, les icones se trouveront décalé par rapport au grand titre :

Ligne rouge = centre de la page
Zone bleu = les trois petit titre

La c'est quand tout va bien avec des icones bien centré.

Là, c'est quand je rajoute les titres et que ça dérape :


Voici la partie du code qui concerne cette partie :

<div class="text-align description">
        <h2>Monarch Games Studio, en bref :</h2>
        <div class="icone-groupe">
            <div class="icone">
                <img src="images/Crea.png">
                <p>De la créativité !</p>
            </div>
            <div class="icone">
                <img src="images/communau.png">
                <p>Une grande communauté !</p>
            </div>
            <div class="icone">
                <img src="images/echange.png">
                <p>Beaucoup d'échange !</p>
            </div>
        </div>
    </div>

.text-align{
    text-align: center;
}

.icone-groupe{
    display: flex;
    justify-content: center;
}

.icone{
    display:table-cell;
    vertical-align: middle;
    font-family: cabin;
    font-size: 18px;
}

.icone:nth-child(2){
    margin: 0 75px;
}

.icone img{
    width: 104.5px;
    height:120.5px ;
}

.description > h2{
    font-family: cabin;
}

J'espère avoir été sufisament clair même si mon html ne l'est certainement pas autant.


Merci en avance de vos réponses.

Salut,

Les moitiés de pixels, ça n'existe pas.

Bref, pour résoudre le problème, tu peux appliquer flex: 1; sur .icône, pour qu'ils fassent tous la même proportion.

-
Edité par EmmanuelBeziat 24 avril 2017 à 19:07:50

Génial Merci beaucoup !