[Résolu] Aligner verticalement deux phrases de tailles différentes

myself

30 Mar 2023 à 05:02

Salut,

Encore un problème de base. Alors j’ai cherché sur https://www.alsacreations.com/tuto/lire/1032-comment-centrer-verticalement-sur-tous-les-navigateurs.html comment aligner verticalement mes deux portions de phrase, mais je ne trouve pas…

https://codepen.io/vZgtErTghZdQdgZA/pen/KKxYOoz

Merci Smiley confused

//edit : je précise que je ne veux pas d’alignement horizontal, mais bien que vertical.
Modifié par myself (30 Mar 2023 - 09:45)

niuxe

Modérateur

30 Mar 2023 à 06:17

salut,


.vcenter span{
  display: block;
}

myself

30 Mar 2023 à 06:20

Hello

Ça ne marche pas chez moi.

myself

30 Mar 2023 à 06:26

Je voudrais ça, en gros : https://ibb.co/5kYnPZs

Sous Photoshop, je sais faire ^^
Modifié par myself (30 Mar 2023 - 06:27)

parsimonhi

Modérateur

30 Mar 2023 à 08:09

Bonjour,

Avec du flex :

.vcenter {
	display: flex;
	align-items: center;
}
.bla {
  font-size: 20px;
}
.bli {
  font-size: 100px;
}

Amicalement,

myself

30 Mar 2023 à 08:14

Merci beaucoup parsimonhi, je pensais avoir vu ces lignes-là dans le lien d’Alsacréations que j’avais cité, mais non, ton code marche bien.

Encore merci, et je te renvoie ton salut amical.

Belle journée à tous.

myself

30 Mar 2023 à 09:44

Zut, ça ne marche pas avec mes émoticons. J’ai ça pour l’instant : https://codepen.io/vZgtErTghZdQdgZA/pen/KKxYOoz

Je voudrais comme ça :
https://ibb.co/r5CSgFB
Il faudrait que le bloc rouge se redimensionne automatiquement selon les nombres d’émoticons et fasse comme un block. Je suis en train de tester avec les flottants…

parsimonhi

Modérateur

30 Mar 2023 à 10:13

Bonjour,

Dans ce cas, c'est peut-être simplement la propriété vertical-align qu'il faudrait utiliser. On abandonne flex et on fait par exemple :

.vcenter {
}
.bla {
  background-color: red;
  padding: 10px;
  font-size: 20px;
  display: inline-block;
  width: auto;
  vertical-align: middle;
}
.bli {
  font-size: 100px;
  vertical-align: middle;
}

Amicalement,

myself

30 Mar 2023 à 10:38

Voilà, c’est le rendu que je cherchais. Désolée pour le tâtonnement.

Questions générales et questions de débutants

[Résolu] Aligner verticalement deux phrases de tailles différentes