Discussion :

[Ginklaw]

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.

[JefReb]

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;
}

[Ginklaw]

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

[JefReb]

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>

[Ginklaw]

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

[JefReb]

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 ...

[Ginklaw]

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