Como alinhar verticalmente 2 tamanhos diferentes de texto?

Eu sei que para alinhar o texto verticalmente no meio de um bloco, você define a altura da linha para a mesma altura do bloco.

No entanto, se eu tiver uma frase com uma palavra no meio, claro 2em. Se a frase inteira tiver uma altura de linha igual à do bloco que a contém, o texto maior será alinhado verticalmente, mas o texto menor estará na mesma linha de base do texto maior.

Como posso definir para que os dois tamanhos de texto fiquem alinhados verticalmente, de modo que o texto maior fique em uma linha de base inferior ao texto menor?

Tentar vertical-align:middle;contêineres embutidos?

EDITAR: funciona, mas todo o seu texto deve estar em um contêiner embutido, como este:

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

A funcionalidade que você está vendo está correta porque o padrão para "alinhamento vertical" é a linha de base. Parece que você quer vertical-align:top. Existem outras opções. Veja aqui em W3Schools .

Editar W3Schools não limpou sua atuação e ainda, parece, ser uma fonte de informação de má qualidade (na melhor das hipóteses). Agora eu uso o sitepoint . Role até o final da página inicial do sitepoint para acessar suas seções de referência.

os dois conjuntos de texto devem ter a mesma altura de linha fixa e o conjunto de alinhamento vertical

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

Você tecnicamente não pode, no entanto, se você tiver tamanhos de texto fixos, poderá usar o posicionamento (relativo) para mover o texto maior para baixo e definir a altura da linha para o texto menor (presumo que este texto maior esteja marcado como tal então você pode usar isso como um seletor de CSS)

Você pode usar tamanhos de porcentagem para reaplicar o do pai 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 

Maneira fácil - use 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>

Uma opção é usar uma tabela onde os textos de tamanhos diferentes estão em suas próprias células e usar o align: middle em cada célula.

Não é bonito e não funciona para todas as ocasiões, mas é simples e funciona com qualquer tamanho de texto.

Isso funciona

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>