Comment aligner verticalement 2 tailles de texte différentes ?

Question

Je sais que pour aligner verticalement du texte au milieu d'un bloc, vous définissez la hauteur de ligne à la même hauteur que le bloc.

Cependant, si j'ai une phrase avec un mot au milieu, qui est 2em. Si toute la phrase a une hauteur de ligne identique à celle du bloc conteneur, alors le texte plus grand est aligné verticalement mais le texte plus petit est sur la même ligne de base que le texte plus grand.

Comment puis-je le configurer de sorte que les deux tailles de texte soient alignées verticalement, de sorte que le texte plus grand soit sur une ligne de base inférieure à celle du texte plus petit?

Answer 1

Essayez vertical-align:middle; sur les conteneurs en ligne?

EDIT : cela fonctionne mais tout votre texte doit être dans un conteneur en ligne, comme ceci :

        test
        test

Answer 2

Les deux ensembles de texte doivent avoir la même hauteur de ligne fixe et la valeur vertical-align définie

 span{
     vertical-align: baseline;
     line-height: 50px;
}

Answer 3

La fonctionnalité que vous voyez est correcte car la valeur par défaut pour "vertical-align" est la ligne de base. Il semble que vous vouliez vertical-align:top. Il existe d'autres options. Voir ici sur W3Schools.

Éditer W3Schools n'a pas nettoyé son acte et semble toujours être une source d'information médiocre (au mieux). Je utilise maintenant sitepoint. Faites défiler jusqu'en bas de la page d'accueil de sitepoint pour accéder à leurs sections de référence.

Answer 4

Manière facile - utilisez flex:

        abcde
          
        efghai

    div {
        padding: 20px;
        background-color: orange;
        display: flex;
        align-items: center; }

    span {
        font-size: 1.5em; }

Answer 5

Techniquement, vous ne pouvez pas le faire, cependant, si vous avez des tailles de texte fixes, vous pourriez utiliser le positionnement (relatif) pour déplacer le texte plus grand vers le bas et définir la hauteur de ligne sur le texte plus petit (je présume que ce texte plus grand est balisé en tant que tel afin que vous puissiez l'utiliser comme sélecteur CSS)