CSS flex avec align-items

Version imprimable

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:

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:

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.

rajoute:

Code:

1
2
3
4
5
6
div > div {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

17/07/2017, 21h17
Ginklaw

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

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:

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:

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>

20/07/2017, 19h04
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 ;).

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:

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:

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

20/07/2017, 19h16
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 :D