垂直方向の配置を有効にするには、親要素の高さプロパティに静的な値が必要です。自動値やパーセンテージ値では十分ではありません。さらに、最新のさまざまなブラウザでは、非インライン要素で垂直方向の配置を正確にレンダリングすることが困難になります。

配置のための要素の選択

よくある誤解は、vertical-align が適用されるものであるということです。コンテナ要素。text-align に似ています。ただし、垂直方向の配置が必要な要素に割り当てる必要があります。たとえば、

を中央に配置したい場合は、

実際の例

次の HTML と CSS を考慮してください。 code:

HTML:

<div>

ログイン後にコピー

ログイン後にコピー

CSS:

#outer {
  height: 200px;
  text-align: center;
}

#inner {
  display: inline-block;
  height: 200px;
  vertical-align: middle;
}

#header {
  display: inline-block;
}

ログイン後にコピー

直感的には、

が期待されるかもしれません。

<div> 内で垂直方向の中央に配置される要素要素。しかし、そうではありません。その理由を理解するには、垂直方向の配置が親要素内で行ごとに行われることを覚えておくことが重要です。したがって、<div> の内容が要素が 1 行を超える場合、

は

この概念を説明するために、HTML コードを変更します。

<div>

ご覧のとおり、

は、垂直方向の配置はテキストの行の高さに基づいているため、要素は親要素内で垂直方向の中央に配置されます。