18041 sujets

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

Garder le centrage d'un élément au changement de taille d'écran

Bonjour,
J'essaye de garder un élément centré horizontalement dans un display:flex. Le but est de conserver l'élément central au centre lorsque l'on réduit la taille de l'écran. Les propriétés du conteneur sont "align-items: center; et justify-content: space-between;" ce qui a pour effet de ne plus conserver l’élément du centre au milieu de l'écran (qui ne l'est pas tout à fait au départ) lorsque l'on change la largeur de l'écran.
J'ai essayé plusieurs choses mais elles ne conviennent pas car cela impacte le rétrécissement.
j'aimerais que les éléments se rapprochent les uns des autres au rétrécissement mais que celui du milieu reste toujours horizontalement au milieu de l'écran.

Pour dire simplement, j'aimerais que l'image du milieu soit parfaitement au centre de l'écran au départ et lorsque la taille de l’écran diminue, les éléments se rapprochent mais que celui du milieu reste parfaitement au centre.
Illustration: https://codepen.io/otherness/pen/QWbmgaa

Merci par avance pour votre aide.
Modifié par otherness (13 Mar 2020 - 11:52)
Administrateur
Hello,

Une solution rapide serait de te passer de flexbox pour adopter Grid Layout et placer tes éléments dans 3 colonnes égales: 


header {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
}
img {
  max-width: 100%;
  height: auto;
}
Merci Raphael pour ta réponse!
j'ai essayé ta méthode et ça m'a bien aidé, ça ne marchait pas au début mais en mettant "justify-self:start;" pour l'image de gauche, "justify-self:center;" pour l'image du milieu et "justify-self:end" pour celle de droite; ça donne le résultat escompté, à part que l'image du milieu est devenue shrink lorsque je réduis l'écran ,j'ai dû donc lui mettre une valeur "min-width: " pour qu'elle ne se réduise pas lors du changement de taille d'écran.
Et pour centrer les élément verticalement: align-items: center; .

je peux donc considérer que cette méthode est satisfaisante, merci beaucoup pour ton aide Raphael !

Illustration:
https://codepen.io/otherness/pen/jOPzZLq
Modifié par otherness (13 Mar 2020 - 17:30)
Sujet clos
Aller à