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 !

essaye avec "justify content"

Nop ça ne bouge pas 

Montre nous aussi ton code HTML

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 Anonyme 18 mai 2017 à 10:57:04

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

Bah mon container c'est #indexButtons, mais ça ne résout pas le problème.

On va reprendre depuis le début ^^'

https://jsfiddle.net/fxvcc0t7/

Voilà :

https://jsfiddle.net/1ssha4dz/

J'ai rajouté le justify-content

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.

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!