Discussion :

[pierrot10]

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 HTML :

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

[jreaux62]

Bonjour,

• A Complete Guide to Flexbox
• Flexbox

Une solution :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.navbar-expand-lg .navbar-nav a.nav-link {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
}

[pierrot10]

Merci Jereaux,

Je connais peu le flex, et j'ai regardé un tuto. Je pensais qu'un display:flex ne pouvais être mis que dans le conteneur.
J'ai un meeting dans 5mn et je vais regardé ceci plus tard.

Bon après-midi.

[pierrot10]

Merci beacoup Jreaux,
Je comprends ce que tu propose de faire.
Ca marche, en effet, très bien.