CSSでサイズの違う文字の上下の高さを中央に揃える

サイズの違う文字を並べる場合、基本的には文字の下揃えで並びます。CSSのvertical-align: baseline;がデフォルトのためです。

vertical-alignでmiddleを設定すれば、サイズが違う文字を高さの中央に揃える事ができます。

これが効くのはインライン要素のみであり、ブロック要素には反映されません。ラインを揃えたい部分がインライン要素になっているかどうかに注意しましょう。

サイズの違う文字は下揃えになる

文中にサイズが異なる文字を並べるケース

今回は1行の文章中にフォントサイズの違う文字が混在する時に、CSSでそれぞれの高さを中央に揃える方法です。

例えば文字を強調させるため、あえて文中の一部の文字サイズを大きくする場合がありますよね。

そうすると行中に大小サイズの文字が横並びした形になります。

この時、文字の縦方向の基本は「ベースライン」に揃う様になっています。

ベースライン

ベースラインとは、文字の下の端の事です。英字でも大文字の下端に揃う様になる訳です。

ベースラインに揃った例

この様に文字の下の位置ラインに沿って文字が並ぶことになります。

iタグなどのアイコンフォント

文中にiconフォント等を使っている場合は特に、アイコンの上下方向の配置の調整に悩まされます。

この様にアイコンだけが下に下がってしまう事がよくあるでしょう。

縦方向の指定ラインに揃えるCSSプロパティ

この様にベースラインではなく、縦方向の中央ライン（中央寄せ）に揃えたい場合がありますよね。

また時には、行の上端ラインで揃えたい場合もあるかも知れません。

この様に縦方向の上・中央・下など指定したラインに文字やアイコンを揃えるCSSプロパティが「vertical-align」です。

vertical-alignプロパティ

span { vertical-align: middle; //中央を示す値 }

上記の様にmiddleを指定する事で上下の中央に揃っているのがわかりますね。

vertical-alignプロパティのデフォルト値は、下揃えの「baseline」になっています。

そのため何も設定しない場合は、文字の下端が揃う様になっている訳です。

プロパティ値の種類

他にも「middle」や「top」「sub」など様々な値が設定できます。

上下の中央揃えをする

よく使うvertical-align: middle;で、サイズの違う文字を中央に揃えてみましょう。

対象の文章（大小サイズ混在）

文章の各箇所をspanタグで囲って、それぞれ大小サイズを変えてみます。

HTMLソース

<p>文章内に<span class="size_big">強調</span>したい部分と<span class="size_small">控えめ</span>にしたい部分があります。</p>

CSS

span.size_big{ font-size: 3rem; } span.size_small{ font-size: 1rem; }

事例

文章中にサイズが大きくなっている部分と小さくなっている部分とが出ていますね。

この時点ではvertical-alignの設定がないため、文字は下揃えになっています。

つまりCSSでいうと「baseline」と同じ扱いになっている訳ですね。

ここにvertical-align: middle;を設定してみましょう。

大小混在の文字を上下中央に揃えた例

サイズの違いに関わらず、中心線に揃った並びになった事がわかりますね。

vertical-alignを自由に操る

次にspanタグやiタグに、vertical-alignの様々な値を入れた例を紹介しましょう。

vertical-alignの値と並びの変化

vertical-align: baseline;を設定した場合

この場合親要素のベースラインに揃います。

vertical-align: middle;を設定した場合

この場合親要素の高さの中央に揃います。

vertical-align: top;を設定した場合

この場合親要素の高さの上端に揃います。

vertical-align: text-top;を設定した場合

この場合親要素のテキストの上端に揃います。

vertical-align: bottom;を設定した場合

この場合親要素の高さの下端に揃います。

vertical-align: text-bottom;を設定した場合

この場合親要素のテキストの下端に揃います。

vertical-align: sub;を設定した場合

この場合親要素の下付き文字のベースラインに揃います。
例えば英字のgやyなど下にはみ出す文字ですね。

vertical-align: super;を設定した場合

この場合親要素の上付き文字のベースラインに揃います。
2乗の2の部分がそれにあたりますね。

vertical-align: 50%;を設定した場合

この場合親要素のベースラインを基準に、行の高さ（line-heightプロパティの値）に指定割合を掛けた分だけ上下の位置に動きます。

vertical-align: -20px;を設定した場合

この場合親要素のベースラインを基準に、指定した量だけ上下の位置に動きます。例は－数値なので下に落ちていますね。

vertical-alignで高さのラインが調整できない原因

vertical-alignプロパティで上中下様々なラインに揃える事ができますが、見落としがちな点があります。

それは、このプロパティが「インライン要素」にしか使う事ができないという点です。

vertical-alignで、ブロック内の要素の縦方向ラインを指定する事はできません。

その中に入っている「インライン要素」に対してのみ、縦方向ラインを指定する事ができるのです。

ブロックレベルとインラインレベル

よく高さ指定をしても文字が動かない、というケースに陥る人がいます。

それは指定対象が「ブロックレベル要素」になっていないでしょうか。

ブロックレベル要素

ブロックレベル要素のタグといえば、pタグやdivタグなどがその代表例です。

そのタグで囲うとそこで段落が終了となり、次の要素は次の段に改行されて表示される特徴があります。

このブロックレベル要素タグにvertical-alignを指定しても、ラインは反映されません。

インライン要素

インライン要素タグといえば、spanタグやaタグなどがその代表です。

そのタグで囲っても、改行などされずにそのままつながっていく特徴があります。

vertical-alignが反映されるのはこれらインライン要素と、tableセル要素のみとなっています。

アイコンタグ（i）はもちろんインライン要素なので、vertical-alignを指定する事ができます。

高さがうまく揃わない実例

例えば以下の様なタグ構成だと、文字の高さを揃える事はできません。

ありがちな現場のシーンを一つご紹介しましょう。

対象のコンテンツ構成

HTMLソース

<div> <p>お問い合わせは<a href="#">こちら</a></p> </div>

CSS

div p{ vertical-align: middle; } div p a{ font-size: 3rem }

実行例

pタグは通常サイズのまま、aタグのテキストだけサイズを大きくしています。

そして「お問い合わせは」の部分を「こちら」の文字の高さの中央ラインに揃えたい訳です。

ところこの時、「お問い合わせは」の文字部分は下揃えのまま動きません。

それはpタグ自体がブロック要素になっているためです。

インライン要素側に設定する事

ではどうやってこの部分のラインを調整できる様になるのでしょうか。

まず「お問い合わせは」の部分はブロック要素なので動きません。

ラインを動かせるのはインライン要素側なので、「こちら」の文字側を動かすという意識が必要です。

ですのでaタグに対してvertical-alignを設定すればOKです。

これで「こちら」の文字側のライン調整ができる様になります。

CSS

div p{ //親のブロック要素 } div p a{ font-size: 3rem vertical-align: middle; }

実行例

どうしても微妙にラインがずれる場合

CSSで中央ラインに揃得たにも拘らず、よく見ると少しずれていると感じた事は無いでしょうか。

特にアイコンフォントの配置などで、私はよく見受けます。

vertical-alignは、親要素の行の高さ（line-heightプロパティの値）によっても指定ラインが変わります。

微妙に揃わない場合は、親のブロックレベル要素に適用されたline-height値をいったん0にしてみましょう。

そうすると違いが出てくるはずなので、影響していればそれがわかります。

一押し人気コーナー紹介