vertical-align プロパティによる垂直方向の配置

Web デザインの世界では、垂直方向の配置は視覚的な美しさを向上させる上で重要な役割を果たし、コンテンツを効果的に整理します。 CSS のvertical-align プロパティは、親要素内でインライン要素を垂直方向に配置する手段を提供し、開発者が正確な位置合わせを実現できるようにします。ただし、その複雑さを理解することは、複雑な作業になる可能性があります。

垂直方向の配置の決定

垂直方向の配置のメカニズムを理解するには、まず、垂直方向の配置が適用されるのは以下の場合にのみであることを認識する必要があります。インライン要素。 、、またはブロックレベル要素内のテキストなどのこれらの要素は 1 行を占め、暗黙的な高さはありません。さらに、固有の行の高さが欠落している要素の行の高さを指定することは必須です。

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

位置合わせのための要素の選択

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

タグを

内で中央に配置したい場合は、vertical-align プロパティを

に直接適用する必要があります。

実践例

次の HTML と CSS を検討してくださいコード:

HTML:

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

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

#header {
  display: inline-block;
}
直感的には、
 要素が 
 要素内で垂直方向の中央に配置されると予想されるかもしれません。しかし、そうではありません。その理由を理解するには、垂直方向の配置が親要素内で行ごとに行われることを覚えておくことが重要です。したがって、
 要素の内容が 1 行を超える場合、
 は期待どおりに配置されません。
この概念を説明するために、HTML コードを変更できます。
ご覧のとおり、垂直方向の配置はテキストの行の高さに基づいているため、
 要素は親要素内で垂直方向の中央に配置されます。