Partage

Centrer (encore et toujours ;) ) dans un flex

Sujet résolu
18 mai 2017 à 10:02:04

Bonjour,

Mon problème est simple: j'ai deux boutons alignés verticalement dans un conteneur flex et je voudrais qu'ils soient centrés (text-align: center; ne marche pas).

/* Conteneur des boutons de la page d'accueil */
#indexButtons {
    display: flex;
    flex-direction: column;
    border: 1px solid white;
}

/* Boutons en général */
.myButton {
    outline: none;
    text-decoration: none;
    border-radius: 10px 10px;
    padding: 10px;
    margin: 5px;
    margin-top: 20px;
    width: 75%;

    color: white;
    font-size: 20px;
}

/* Couleur des boutons */
.orangeButton {
    border: 1px solid #e67300;
    background-color: #e67300;
}

.greenButton {
    border: 1px solid #009900;
    background-color: #009900;
}

Voici ce que ça donne:

Merci ! :)

18 mai 2017 à 10:19:02

essaye avec "justify content"
18 mai 2017 à 10:52:19

Montre nous aussi ton code HTML :)
18 mai 2017 à 10:56:43

FloJDM a écrit:

Montre nous aussi ton code HTML :)

 <div id="indexButtons" >
      <a href="pages/inscription.html" class="myButton  orangeButton uppercase" id="goInscription">Inscription</a>
      <a href="pages/connexion.html" class="myButton  greenButton uppercase" id="goConnexion">Connexion</a>
 </div>

Ta da ;)

-
Edité par Mickrosoft2 18 mai 2017 à 10:57:04

18 mai 2017 à 11:13:28

Il est ou ton container ?

ça devrait plus ressembler à ça

<div class="container-buttons">
<div class="button" id="indexButtons" >
     <a href="pages/inscription.html" class="myButton  orangeButton uppercase" id="goInscription">Inscription</a>
     <a href="pages/connexion.html" class="myButton  greenButton uppercase" id="goConnexion">Connexion</a>
</div>
</div>
.container-buttons
{
   display: flex;
   justify-content: center;
}




-
Edité par FloJDM 18 mai 2017 à 11:17:10

18 mai 2017 à 11:20:45

Bah mon container c'est #indexButtons, mais ça ne résout pas le problème.
18 mai 2017 à 11:25:39

On va reprendre depuis le début ^^'

https://jsfiddle.net/fxvcc0t7/

18 mai 2017 à 11:51:49

Salut !

Vu que tu as fait un flex-direction: column; , l'axe principal (sur lequel agit justify-content) est l'axe vertical). Si tu veux centrer tes boutons horizontalement tu dois utiliser align-items: center. :)
18 mai 2017 à 12:00:46

Tybok a écrit:

Salut !

Vu que tu as fait un flex-direction: column; , l'axe principal (sur lequel agit justify-content) est l'axe vertical). Si tu veux centrer tes boutons horizontalement tu dois utiliser align-items: center. :)


Merci beaucoup! :D

Centrer (encore et toujours ;) ) dans un flex

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown