高さと垂直方向の配置

親要素の高さは静的な値 (つまり、自動やパーセンテージではない) でなければなりません。高さが指定されていない場合、ブラウザはコンテンツに基づいて高さを計算するため、予期しない結果が生じる可能性があります。

インライン要素の配置

text-align とは反対これは要素を含むブロック レベルに適用されますが、vertical-align は配置するインライン要素に適用する必要があります。

ブラウザの違い

古いブラウザでは使用できない場合があります。垂直方向の整列を一貫してサポートします。ただし、最新のブラウザは、非インライン要素で使用した場合でも、この機能を適切に処理します。

例: テキストの中央揃え

たとえば、次の HTML があるとします。

#inner でテキストを垂直方向に中央揃えにするには、vertical-align: middle を #header:
#header {
  display: inline-block;
  line-height: 1em;
  margin: 0;
  vertical-align: middle;
}
この例では、#inner は高さが固定されたインラインブロック要素であることに注意してください。