2つの異なるサイズのテキストを垂直方向に揃える方法

テキストをブロックの中央に垂直方向に揃えることはわかっていますが、line-heightをブロックの同じ高さに設定します。

ただし、単語の途中にある文がある場合、それは2emです。文全体の行の高さが包含ブロックと同じである場合、大きいテキストは垂直方向に揃えられますが、小さいテキストは大きいテキストと同じベースライン上にあります。

両方のサイズのテキストが垂直方向に揃うように設定するにはどうすればよいですか？

vertical-align:middle;インラインコンテナーを試しますか？

編集：それは機能しますが、すべてのテキストは次のようにインラインコンテナになければなりません：

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

「vertical-align」のデフォルトはベースラインであるため、表示されている機能は正しいです。あなたが望むようですvertical-align:top。他のオプションがあります。W3Schoolsでここを参照してください。

Edit W3Schoolsは彼らの行動をクリーンアップしていませんが、それでもなお、粗末な（せいぜい）情報源であるように見えます。今はsitepointを使用しています。sitepointフロントページの下部までスクロールして、参照セクションにアクセスします。

2つのテキストのセットは、同じ固定行の高さと垂直方向の配置セットを持っている必要があります

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

ただし、技術的にはできませんが、テキストサイズが固定されている場合は、配置（相対）を使用して大きなテキストを下に移動し、行の高さを小さなテキストに設定できます（この大きなテキストはそのようにマークアップされていると思います） CSSセレクターとして使用できます）

パーセンテージサイズを使用して、親のサイズを再適用できます。 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 

簡単な方法-フレックスを使用する：

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

オプションは、異なるサイズのテキストがそれぞれのセルにある表を使用し、各セルでalign：middleを使用することです。

きれいではなく、すべての状況で機能するわけではありませんが、シンプルで、任意のテキストサイズで機能します。

これは機能します

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>