強調する目的で文字サイズを大きくするなど、1行の中に「大きさの異なる文字」が現れることがあります。そのとき、それぞれの文字の表示位置は、標準ではベースラインに合わせて揃えられます。(※ベースラインとは、英字の場合だと「大文字の下端」です。小文字の「g」や「y」などは、ベースラインよりも少し下にはみ出て表示されます。)

しかし、場合によっては、(ベースラインで揃えるのではなく)縦方向の中央に寄せて表示させたい場合もあるでしょう。または、行の上端に揃えたい場合もあるかも知れません。そのように、1行の中に大きさの異なる文字があるときに、（縦方向で）『どの位置で文字を揃えたいか』を指定できるプロパティとして、CSSには「vertical-align」プロパティがあります。

使い方は簡単で、以下のように記述します。

span {
   vertical-align: (縦方向の位置を表すキーワード);
}

縦方向の位置を表すキーワードには、デフォルトである「baseline」のほか、「top」や「bottom」など様々な値が用意されています。詳しくは、後述します。

大きい文字と小さい文字が混在する行で、縦方向の揃え方を指定する例

ここでは、縦方向で揃えられる位置が分かりやすいように、若干大きめの文字サイズで表示してみます。具体的には、標準で15ptの大きさで表示されている段落内に、大きめの文字として24pt、小さめの文字として9ptの文字を含めています。
何がどう配置されるのかが分かりやすいように、それぞれに色を付加しています。色の詳細は以下の通りです。

• ブロック（p要素）内は、背景黄色。
• ブロック（p要素）内の親要素（span要素）は、緑色背景に白色文字。
• 大きめの文字（em要素）は、30％透過の淡い青色背景に、青色文字。
• 小さめの文字（em要素）は、30％透過の淡い赤色背景に、赤色文字。

※RGBAカラーモデルに対応していない古いブラウザでは、透過背景は見えません。

vertical-alignプロパティは、em要素に対して指定しています。
各値を指定した場合の表示例は以下の通りです。

上記のサンプルでは、所々にアイコンフォントを使ったアイコン(・・)も掲載してあります。行内にアイコンフォントを使ってアイコンを表示する場合にも、アイコンの(上下方向の)配置を調整したいことが多いような気がします。

ブロックレベル要素には使えないので注意

vertical-alignプロパティの使い方は上記の通り簡単なのですが、使いどころには制限があります。ブロックレベル要素には使えない点に注意して下さい。つまり、p要素やdiv要素に対してvertical-alignプロパティを指定しても無視されるということです。
vertical-alignプロパティを適用できるのは、インライン要素と、テーブルセル要素のみです。（ただし、「(※)」記号を付加した値はテーブルセルに対しては適用できません。）

vertical-alignプロパティは、

• ブロックに対して指定して「このブロック内に含まれる要素の上下方向の配置」を指定するわけではなく、
• インライン要素に指定して、「このインライン要素はどう配置するか」を指定します。

意図通りの配置にならない場合

line-heightプロパティ（行の高さ）の値によっても配置が異なってきますので、「どうも予想通りの配置になってくれない」という場合は、親要素などに適用されているline-heightプロパティの値も確認してみて下さい。一旦、その指定を削除してみて、見栄えがどう変化するのかを確認してみると良いと思います。

なお、使用するフォントによって見え方が若干異なるような気がします。(^_^;)
特に「メイリオ」みたいなフォントの高さが独特なフォントだと、その他のフォントよりも若干見栄えが違う気がします。まあその辺は、自分の使いたいフォントで表示確認をしてみつつ、指定してみて下さい。多少見栄えが違うとは言え、配置の方針は同じ(＝「上端」を指定しているのに下端に表示されたりはしない)ですから。

サンプルのソース

最後に、上記のサンプルで使ったHTMLとCSSソースの例を掲載しておきます。
vertical-alignプロパティは、(インライン要素である)em要素に適用しています。
em要素を使った理由はあまりありませんが、親要素をspan要素にしたので、同じspan要素は使わないでおこう、と思っただけです。

■HTMLソース：

<p>
   <span>
      文章内の
      <em class="huge">Huge大文字</em>
      とか
      <em class="tiny">Tiny小文字</em>
      の縦方向の表示位置を調整。
   </span>
</p>

■CSSソース：

p {
   font-size: 15pt;
   background-color: #ffeecc;
   line-height: 1.3;
}
p span {
   background-color: #008000;
   color: white;
}
p em {
   font-style: normal;
   vertical-align: baseline;
}
p em.huge {
   font-size: 24pt;
   color: #0000cc;
   background-color: rgba(204,204,255,0.7);
}
p em.tiny {
   font-size: 9pt;
   color: #cc0000;
   background-color: rgba(255,204,204,0.7);
}

vertical-alignプロパティは12行目にあります。上記では値を「baseline」にしてありますが、この値を他のキーワードに修正することで様々な配置に変更できます。

というわけで、大きい文字と小さい文字が混在する行で、縦方向の揃え方を指定するための「vertical-align」プロパティの解説でした。
異なる大きさの文字を混在させたときや、アイコンフォントを使った際など、行内の上下方向の表示位置を調整したくなったら使ってみて下さい。

(更新日：2016年03月10日)