28234 sujets

CSS et mise en forme, CSS3

[Résolu] Centrer logo display flex

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

EDIT : j'ai testé ici est c'est bien OK -> https://codepen.io/raphaelgoetter/pen/pvgWjMy?editors=1100

<header class="header">
  <img class="logo" src="https://assets.codepen.io/9425/logo-alsacreations.svg" width="358" height="62" alt="Alsacreations">
  <div class="gauche">truc à gauche</div>
  <div class="droite">truc à droite, plus long. Vraiment plus long</div>
</header>


.header {
  display: grid;
  gap: 1rem;
  
  @media (width >= 48rem) {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "gauche logo droite";
    align-items: center;
    
    & .gauche {
      grid-area: gauche;
    }
    & .logo {
      grid-area: logo;
    }
    & .droite {
      grid-area: droite;
      justify-self: end;
    }
  }
}

Modifié par Raphael (14 Oct 2025 - 09:57)
Meilleure solution
Merci @Raphael

Ça fonctionne.
J'ai juste dû ajouter justify-self: start; à grid-area.gauche

Par contre, pourquoi utiliser @media (width >= 48rem) ?
C'est une norme ?
Administrateur
korom a écrit :

Par contre, pourquoi utiliser @media (width &gt;= 48rem) ?
C'est une norme ?
C'est pour éviter d'avoir 3 colonnes sur petit écran (mobile) :
- par défaut il n'y a qu'une colonne
- au-delà de 48rem (768px), tu passes en 3 colonnes

EDIT : par contre j'ai choisi un nommage à l'arrache (gauche, droite) mais le mieux serait que tu remplaces par quelque chose de plus propre hein Smiley cligne
Modifié par Raphael (14 Oct 2025 - 13:48)
Raphael a écrit :
C'est pour éviter d'avoir 3 colonnes sur petit écran (mobile) :
- par défaut il n'y a qu'une colonne
- au-delà de 48rem (768px), tu passes en 3 colonnes

EDIT : par contre j'ai choisi un nommage à l'arrache (gauche, droite) mais le mieux serait que tu remplaces par quelque chose de plus propre hein Smiley cligne


Merci
Oui j'ai utilisé mes appellations existantes. Smiley cligne
Prévenir un modérateur
Répondre au sujet
Aller à