28234 sujets

CSS et mise en forme, CSS3

Bonjour,

j'ai créé un top header avec à gauche le bouton menu, au centre le logo et à droite les coordonnées (tél., RS, lang…).

j'ai placé le tout en display:flex; mais comment faire pour que mon logo soit centré alors que les éléments de gauche et de droite ne font pas la même largeur ?
Sur l'image ci-dessous, en haut ce que je souhaite
en bas, ce que j'ai.

Merci de votre aide.

upload/1760361966-65174-17603567364146capturedaeacran.png
Modérateur
Salut,

La première idée qui me vient à l'esprit, c'est une position absolute. La contrainte est que tu sors du flux.
Niuxe a écrit :
Salut,

La première idée qui me vient à l'esprit, c'est une position absolute. La contrainte est que tu sors du flux.


Oui j'y ai bien pensé mais en effet ça implique de sortir du flux.
N'y aurait-il pas une solution autre ?
Administrateur
Hello.

À l'aveugle voici une idée :
Sur desktop, une grille de 3 colonnes : 1fr auto 1fr.
La colonne en auto contient ton logo et les deux autres se répartissent l'espace restant.
Dans la colonne de droite, tu alignes ton élément en justify-self: end.

Normalement ça devrait faire le job. En tout cas dans ma tête le scénario fonctionne Smiley cligne