Discussion :

[Jessyv96]

Bonjour,

Je travaille avec les flexbox, j'aimerai aligner deux éléments , l'un sur la gauche et l'autre au centre, je n'arrivais à avoir le résultat que je voulais, du coup j'ai ajouté une div vide, j'ai à peu près le résultat attendu sauf que je me demandais s'il y avait pas un moyen agir sur un seul élément dans la boite flexible et donc éviter de passer par une div vide.

Code HTML :

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

1
2
3
4
5
6
7
8
9
 <div class="header-app text-center box-title">
 
        <button class="btn btn-default">
          element gauche
        </button>
 
        <h2 class="title">element centre</h2>
 
        <div></div>

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
.box-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
 
.title {
  align-self: center;
}

j'ai essayé ça,mais aucun résultat, auriez-vous une solution pour moi ?

[NoSmoking]

Bonjour,
tu peux obtenir le même résultat en supprimant la <div> « fantôme » et en modifiant le CSS comme suit :

Code :

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

1
2
3
4
.title {
/*  align-self: center;  /* ne sert pas */
  margin: auto;
}