Comment aligner verticalement 2 tailles de texte différentes?

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

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

Comment puis-je le définir de manière à ce que les deux tailles de texte soient alignées verticalement, de sorte que le texte le plus grand soit sur une ligne de base inférieure au texte plus petit?

Essayer vertical-align:middle;des conteneurs en ligne?

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

    <div style="height:100px; line-height:100px; background:#EEE;">
        <span style="vertical-align:middle;">test</span>
        <span style="font-size:2em; vertical-align:middle;">test</span>
    </div>

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

Edit W3Schools n'a pas nettoyé leur acte et semble toujours être une source d'informations de mauvaise qualité (au mieux). J'utilise maintenant sitepoint . Faites défiler vers le bas de la page d'accueil du sitepoint pour accéder à leurs sections de référence.

les deux ensembles de texte doivent avoir la même hauteur de ligne fixe et l'ensemble d'alignement vertical

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

Techniquement, vous ne pouvez pas, cependant, si vous avez des tailles de texte fixes, vous pouvez utiliser le positionnement (relatif) pour déplacer le texte le plus grand vers le bas et définir la hauteur de ligne sur le texte plus petit (je suppose que ce texte plus grand est marqué comme tel vous pouvez donc l'utiliser comme sélecteur CSS)

Vous pouvez utiliser des tailles de pourcentage pour réappliquer le parent line-height

.big {
  font-size: 200%;
  line-height: 25%;
  display: inline-block;
  vertical-align: middle;
}

Utque aegrum corpus <span class="big">etiam</span> levibus solet offensis 

Méthode simple - utilisez flex:

<div>
        abcde
        &nbsp;&nbsp;
        <span>efghai</span>
</div>

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

    span {
        font-size: 1.5em; }
</style>

Une option consiste à utiliser un tableau là où les textes de différentes tailles sont dans leurs propres cellules et à utiliser align: middle sur chaque cellule.

Ce n'est pas joli et ne fonctionne pas pour toutes les occasions, mais c'est simple et fonctionne avec n'importe quelle taille de texte.

Cela marche

header > span {
    margin: 0px 12px 0px 12px;
    vertical-align:middle;
}
.responsive-title{
    font-size: 12vmin;
    line-height: 1em;
}
.responsive-subtitle{
    font-size: 6vmin;
    line-height: 2em;
}

<header>
  <span class="responsive-title">Foo</span>
  <span class="responsive-subtitle">Bar</span>
</header>