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

Vous pouvez utiliser des tailles en pourcentage pour réappliquer la hauteur de ligne du parent

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

Utque aegrum corpus etiam levibus solet offensis

Answer 2

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

Ce n'est pas très esthétique et ne fonctionne pas pour toutes les occasions, mais c'est simple et fonctionne avec n'importe quelle taille de texte.

Answer 3

Cela fonctionne

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;
}

  Foo
  Bar