vertical-alignはブロック全体を上下中央に配置するプロパティではない

vertical-align: middleは、通常のブロック要素を親要素の上下中央へ移す指定ではありません。vertical-alignが働くのは、インラインレベルの要素とtable-cellです。

効かないときは値を増やすのではなく、何を何に対してそろえたいかを決めます。同じ行にある画像やinline-blockをそろえるのか、一行の文字を一定の高さへ置くのか、セルの内容を上下中央へ置くのかで、使う仕組みが変わります。

vertical-alignが効く対象はinline-levelとtable-cell

CSS 2.1のvertical-alignプロパティは、適用対象をインラインレベルの要素とtable-cellに限っています。display: blockの箱へ指定しても、そのブロック全体を親の中央へ配置する計算には使われません。

次のCSSは、仕組みを説明する仮例です。

.box {
  display: block;
  height: 160px;
  vertical-align: middle;
}

この.boxは通常のブロックです。vertical-alignの対象ではないため、heightの中央へ内容を移す効果は得られません。vertical-alignは継承されないので、親へ一度指定すれば、子のインライン要素へ自動で適用されるわけでもありません。

インラインレベルの要素に指定したmiddleは、要素の垂直方向の中点を、親のベースラインに親文字のx-heightの半分を加えた位置へ合わせます。「親の高さの50%」を意味する値ではありません。

一行の中で画像や部品をそろえるなら子へ指定する

インライン画像、inline-block、inline-tableは、一つの箱として行の中へ参加します。同じ行にある高さの違う部品をそろえるなら、整列させる子要素へvertical-alignを指定します。

<p class="label">
  <span class="label__mark">A</span>
  <span class="label__text">受付中</span>
</p>

.label__mark,
.label__text {
  display: inline-block;
  vertical-align: middle;
}

このコードは実在するサイトではなく、適用先を示す仮例です。二つの箱は同じ親の行へ参加し、それぞれの中点を同じ基準へ合わせます。vertical-alignは.label全体を別の箱の中央へ移しているのではありません。

インライン画像の下へわずかな空きが見える場合も、画像が文字と同じベースラインへ並んでいる可能性があります。画像を文章の一部として置くなら、vertical-align: middle、top、bottomのどこへ合わせるかを決めます。独立したブロック画像として置くなら、display: blockへ変える方が目的に合います。

一行の文字ならline-heightを箱の高さへ合わせる

高さが決まった箱の中へ、一行だけの文字を置く場合は、line-heightを箱の高さへ合わせる方法があります。

<a class="button" href="#">送信内容を確認する</a>

.button {
  display: block;
  height: 40px;
  line-height: 40px;
}

line-heightの定義では、ブロックコンテナーのline-heightが、内部の行ボックスの最小の高さを決めます。行の上下へleadingが分けられるため、一行の文字を一定の高さへ置く用途に使えます。

この方法は、文字が二行へ折り返す場合には使えません。二行なら行ボックスも二つになり、各行が40pxの高さを持ちます。文字数、利用可能な横幅、文字サイズを固定できない場合は、line-heightだけで中央配置を作らないでください。

フォントの字形は、行ボックスの上下をすべて使うとは限りません。計算上の中央と、文字が目で見て中央に感じられる位置が一致するかも確認します。

複数行を上下中央に置くならtable-cellへ指定する

複数行になり得る内容を、一定の高さを持つ領域の上下中央へ置くなら、CSSのtable formattingを使う方法があります。

<div class="message">
  <div class="message__body">
    <p>受付時間と必要書類を確認してから、申し込みへ進んでください。</p>
  </div>
</div>

.message {
  display: table;
  width: 100%;
  height: 160px;
}

.message__body {
  display: table-cell;
  vertical-align: middle;
}

.message__body p {
  margin: 0;
}

CSS 2.1のtable height algorithmsでは、table-cellのvertical-align: middleは、セルの中央と行の中央を合わせます。指定する場所は外側の.messageではなく、セルの役割を持つ.message__bodyです。

CSSのtable formattingは、データ表だけの機能ではありません。CSS table modelの説明は、視覚的な配置に使う場合、文書の構造に合う要素へtable関連のdisplayを指定する方法を示しています。表ではない内容を、table、tr、td要素へ変える必要はありません。

heightを指定したtableの高さは、内容が必要とする高さより小さく固定されるとは限りません。内容が増えれば、領域も高くなり得ます。一定の高さ、可変の文章、対象ブラウザーを組み合わせた表示は、実際の内容で確認します。

配置したい対象を一つずつ分ける

最初に、対象要素の計算済みdisplayを確認してください。次に、そろえる基準が行、固定高の一行、table cellのどれかを決めます。効かないvertical-alignを残したまま別の値を重ねず、対象外の宣言を外してから、一つの配置方式で確認します。