Aligner verticalement avec flex
Bonjour,
J'essaye d'améliorer mon menu que l'on peut voir ici
https://eco-sensors.ch/temp/template/
L'objectif est d'avoir les liens < a > alignés dans l'axe Y.
Voici comment c'est fait et ce que j'ai essayé de faire.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<ul class="navbar-nav d-flex">
<li class="nav-item current first">
<a class="nav-link active" aria-current="page" href="#">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Microkiné</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lecture BIO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">OVID 19</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Déroulement d'une scéance</a>
</li>
<li class="nav-item last">
<a class="nav-link" href="#">Réserver</a>
</li>
</ul> |
J'ai ajouté align-items et justofy-content, "dans conteneurs" qui conteint "les boites" (les li) qui doivent être alignées. Cela fonctionne, mais les li "perdent" leurs hauteurs. En fait, ils prennent la hauteur des <a> qui se trouve dedans. Alors j'ai essayé de les mettre dans les < li > (commenté ci-dessous), puisqu'en fait, c'est les li qui contient ce que veux aligner sur l'axe Y. Mais cela n'a aucun effet
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
.d-flex{
align-items: center;
justify-content: center;
}
.d-flex li{
flex:1;
padding:20px 5px 20px 5px;
border-bottom: 1px solid #e1ebf4;
border-left: 1px solid #e1ebf4;
/*align-items: center;
justify-content: center;*/
} |
Je me demande alors comment aligner les liens en conservant les hauteurs de < li >
PS: J'ai pensé à définir une hauteur fixe aux < li >, mais peut-on éviter ceci?
