垂直方向の配置は「vertical-align」プロパティでどのように機能しますか?

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

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

垂直方向の配置の決定

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

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

配置のための要素の選択

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

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

実際の例

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

HTML:

<div>
<p>CSS:</p>
<pre class="brush:php;toolbar:false">#outer {
  height: 200px;
  text-align: center;
}

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

#header {
  display: inline-block;
}

直感的には、

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

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

の内容が要素が 1 行を超える場合、

は

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

<div>
<p>ご覧のとおり、</p>
<h1 id="は-垂直方向の配置はテキストの行の高さに基づいているため-要素は親要素内で垂直方向の中央に配置されます"> は、垂直方向の配置はテキストの行の高さに基づいているため、要素は親要素内で垂直方向の中央に配置されます。</h1>
</div>