Alignement de textes verticalement

Bonjour,

J'ai une liste à puces avec des textes dans les <li>, j'en ai alignés plusieurs à gauche avec un float: left et le dernier <li> à droite (float: right). Le premier <li> de ceux situés à gauche est écrit sur deux lignes et alors que celui de droite sur une ligne (c'est volontaire). Je souhaiterais juste savoir comment aligner tous ces <li> verticalement afin que ceux sur une ligne apparaissent entre les deux lignes par rapport à celui de gauche.
Image pour illustrer :


Je souhaiterais juste que ces textes soient alignés et apparaissent un petit peu plus bas.
Résultat souhaité :


Pouvez-vous m'aider svp ?
Merci
Modifié par Titouan79 (08 Apr 2019 - 19:33)

Hello,

As-tu un début de code en HTML/CSS posté sur un codepen ou jsfiddle ?

Oui !
https://codepen.io/Titouan79/pen/EJNWXp

Re,

Utilises flexbox, c'est plus simple.

J'ai supprimé:

/*
nav > ul > li:not(:nth-child(8)) {
  float: left;
}

nav > ul > li:nth-child(8) {
  float: right;
} */

Et ajoute ceci au <ul>

display: flex;
justify-content: center;
align-items: center;

J'utiliserais plus de classes aussi, avec la méthode BEM.

Merci bien, mais ducoup, comment faire pour aligner le "mon profil" à droite et les autres éléments à gauche ?
Merci d'avance
Modifié par Titouan79 (08 Apr 2019 - 21:48)

Re,

Il faut rajouter au dernier <li>

    flex: 1;
    text-align: right;

@Raphael

Effectivement mais pourrais-tu expliquer ce qui se passe exactement ? Pourquoi "auto" ?

Re,

J'ai voulu recoder ton menu en mieux, mais je n'arrive pas à faire en sorte que les liens prennent toute la place du menu, verticalement, en flexbox. Si je trouve la réponse, je mettrai le fiddle à jour.

https://jsfiddle.net/qbh1y6ru/1/

Sinon, si Raphael peut intervenir, ce serait chouette

allan00958 a écrit :
Re,

J'ai voulu recoder ton menu en mieux, mais je n'arrive pas à faire en sorte que les liens prennent toute la place du menu, verticalement, en flexbox. Si je trouve la réponse, je mettrai le fiddle à jour.

https://jsfiddle.net/qbh1y6ru/1/

Sinon, si Raphael peut intervenir, ce serait chouette

C'est super sympa de ta part !
N'hésite pas à me tenir au courant si tu y arrives !

@gcyrillus

Merci pour la réponse. Je n'y avais pas pensé.

@Titouan79

J'ai donc mis à jour le fiddle: https://jsfiddle.net/9hjxyb5g/

Tu n'es pas obligé d'utiliser flexbox. Tu peux te contenter des blocks, surtout si tu débutes en CSS. Certains layouts sont plus faciles à créér avec Flexbox.

Je me distance du topic. Si besoin, tu peux m'envoyer un message privé.