Discussion :

[hamzawhy]

Bonsoir,

J'essaie de centrer une image pour tous les appareils mobiles lorsque la page est en cours de chargement.Je travaille avec scss.C'est mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.page-is-changing {
    .cd-logo {
        position: fixed;
        z-index: 4;
        background: url($image-base-path+"/common/logo.svg") no-repeat;
        top: 40%;
        animation: animatezoom 0.8s;
        left: calc(50% - 5.6rem);
        width: 11.3rem;
        height: 10%;
    }
 
    @media screen and (max-width: 780px) {
        .cd-logo {
            position: fixed;
            z-index: 4;
            margin: 0;
            background: url($image-base-path+"/common/logo-small.svg") no-repeat;
            top: 40%;
            left: 50%;
            width: 11.3rem;
            height: 10%;
        }
    }
}

Mais le problème est que le logo arrive correctement en centre pour les applications Web, mais ne vient pas au centre pour Mobile Browser devices

Pouvez-vous m'aider s'il vous plaît à résoudre le problème, car n'arrive plus a utiliser margin = auto pour scss.

merci pour l'aide

[donimedia]

Bonjour ,


Sur PC comme sur mobiles , la méthode qui consiste à utiliser margin: auto; pour centrer une image à l'aide d"un code CSS ou SCSS me semble être la meilleure .

Pour être encore plus précis , je vous recommande d'utiliser le code suivant afin de se concentrer uniquement sur le centrage horizontal , et donc d'éviter de créer des espaces verticaux supplémentaires , au-dessus et au-dessous du logo :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
                ...
        margin-left: auto;
        margin-right: auto;
                ...

La raison pour laquelle cette technique ne fonctionne pas dans votre code , c'est que vous imposez une position fixe au conteneur de votre logo :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
                ...
        position: fixed;
                ...

Ce type de positionnement ne semble pas être compatible avec la méthode de centrage dont je vous ai parlé .

Pour corriger le problème , il suffit de préférer un positionnement relatif au positionnement fixe, aussi bien pour la partie Desktop que mobile ( @media screen etc ... ) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
                ...
        position: relative;
                ...

J'ai créé un Codepen , pour que vous puissier comparer le résultat obtenu avec un positionnement relatif puis avec un positionnement fixe .

Il est accessible à cette adresse :

https://codepen.io/academypedia-donisa/pen/OJPyGPa