1. #1
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    novembre 2016
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 18
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : novembre 2016
    Messages : 10
    Points : 6
    Points
    6

    Par défaut CSS flex avec align-items

    Bonjour,

    J'apprend actuellement le HTML et le CSS, et je n'arrive pas à centrer un élément en utilisant align-items, il m'est impossible de contrôler l'axe secondaire :/

    Voici le code CSS :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
     
    #menu
    {
        width: 100%;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border: 2px black solid;
     
    }
     
    .test, .test2, .test3
    {
        width: 400px;
        height: 200px;
        background-color: cyan;
        text-align: center;
    }
     
    .test2
    {
        background-color: green;
    }
     
    .test3
    {
        background-color: red;
    }

    Et le code html :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    <div id="menu">
       <div class="test">Menu 1</div>
       <div class="test2">Menu 2</div>
       <div class="test3">Menu 3</div>
    </div>
    Merci pour votre aide.

  2. #2
    Membre averti
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    302
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 302
    Points : 369
    Points
    369

    Par défaut

    rajoute:
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    div > div {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
    }

  3. #3
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    novembre 2016
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 18
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : novembre 2016
    Messages : 10
    Points : 6
    Points
    6

    Par défaut

    Cela centre le texte dans les éléments mais ne centre pas les éléments au centre de la page.

  4. #4
    Membre averti
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    302
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 302
    Points : 369
    Points
    369

    Par défaut

    Rebonjour, Difficile de répondre sans wifi pendant les vacances.
    Pour obtenir ce que tu veux, il y a une astuce ... margin: auto
    En fait il faut encapsuler ton menu dans un conteneur flex.

    Voir: https://codepen.io/JefReb/pen/rwXWdJ

    oui voici le code:

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    #conteneur {
    	width: 100%;
    	height: 1000px;
    	background: #eee;
    	margin: 0;
    	padding: 0;
    	display: flex;
    	border: 1px solid red;
    }
    .menu {
    	width: 100%;
    	height: 200px;
    	padding: 10px;
    	margin: auto; /*   astuce */
    	display: flex;
    	align-items: center;
    	justify-content: space-around;
    	border: 2px black solid;
     
    }
    div > div {
    	box-sizing: border-box;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    }
    .test, .test2, .test3 {
    	width: 400px;
    	height: 200px;
    	background-color: cyan;
    	text-align: center;
    }
    .test2 {
    	background-color: green;
    }
    .test3 {
    	background-color: red;
    }
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <div id="conteneur">
    <div class="menu">
      <div class="test">Menu 1</div>
      <div class="test2">Menu 2</div>
      <div class="test3">Menu 3</div>
    </div>
    </div>

  5. #5
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    novembre 2016
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 18
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : novembre 2016
    Messages : 10
    Points : 6
    Points
    6

    Par défaut

    Merci beaucoup @JefReb, tu as résolu mon problème j'avais pas du tout pensé à ajouter un <div> au dessus du <div> menu .

  6. #6
    Membre averti
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    302
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 302
    Points : 369
    Points
    369

    Par défaut

    J'ai revu le code pour "coller" avec celui donné.
    Il n'y a pas besoin de donner une largeur aux flex-item car avec flex-grow:1 il prend toute la place.
    De plus il devient responsive car tu peux alors en fonction de la largeur du media mettre un flex-direction:column au lieu de row.

    Voir résultat: https://codepen.io/JefReb/pen/dRxZWP

    Bien sûr il faut changer la hauteur de la page.
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    #page {
    	box-sizing: border-box;
    	width: 100%;
    	height: 400px; /* pour la hauteur de la page à changer .... */
    	margin: 0;
    	padding: 0;
    	display: flex;
    	border: 1px solid red;
    }
    #menu {
    	box-sizing: border-box;
    	width: 100%;
    	height: 220px;
    	margin: auto; /*   astuce */
    	padding: 10px;
    	display: flex;
    	flex-direction: row;
    	border: 2px black solid;
    }
    .test {
    	height: 200px;
    	display: flex;
    	flex-grow:1;
    	align-items: center;
    	justify-content: center;
    }
    #menu > div:nth-child(1) {
    	background-color: cyan;
    }
    #menu > div:nth-child(2) {
    	background-color: green;
    }
    #menu > div:nth-child(3) {
    	background-color: red;
    }
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <div id="page">
      <div id="menu">
        <div class="test">Menu 1</div>
        <div class="test">Menu 2</div>
        <div class="test">Menu 3</div>
      </div>
    </div>

    J'espère que cela aidera bien que je ne vois pas de réponses de ta part ...

  7. #7
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    novembre 2016
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 18
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : novembre 2016
    Messages : 10
    Points : 6
    Points
    6

    Par défaut

    Bizarre je viens pourtant de répondre, effectivement cela m'a bien aidé et je t'en remercie, mon problème est donc résolu

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [CSS] probléme avec a:hover sur IE (mais bon sous FF)
    Par lafouin dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 12/02/2009, 15h55
  2. [CSS]problème avec les liens
    Par Petogaz dans le forum Mise en page CSS
    Réponses: 16
    Dernier message: 21/04/2006, 19h46
  3. [CSS] Problème avec onglets
    Par jehlg dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 28/03/2006, 11h15
  4. [CSS] problème avec IE et le style de mes liens
    Par titoumimi dans le forum Mise en page CSS
    Réponses: 11
    Dernier message: 22/12/2005, 10h13
  5. Css, problème avec Ie
    Par punkks dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 05/04/2005, 09h12

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo