CSS要素のセンタリングについて詳しく解説

水平方向に中央揃え

インライン要素の場合は、その親要素で text-align:center を使用するだけです

ブロック要素 (float なし) の場合、これを実現するには通常 2 つの方法があります。水平方向に中央揃え、1 つは margin:0 auto で、もう 1 つは css によって計算された関数 calc です。画像要素の場合は、要素に対してvertical-align:middleを使用する必要があります

さらに、displayを使用することで、table要素tdに対してvertical-align:middleを使用できます。 : 親要素の table-cell;vertical-align:middle; も要素の垂直方向の中央揃えを実現でき、このメソッドはインライン要素とブロック要素の両方に使用できます ブロック要素の場合 (これを使用するインライン要素;メソッドは最終的にブロック要素になります)、位置などのいくつかの属性を使用して要素の垂直方向の中央揃えを実現できます。 1. 親要素の位置を設定します: 相対位置 2. 要素の位置を設定します: 絶対。 %; left: 50%; 3. 要素 margin-top:-{height}/2;margin-left:-{width}/2;

の場合は中央に配置します。フローティング ブロック要素 (float:left など) を使用する場合、要素の水平方向と垂直方向の中央揃えを実現するには、position などのいくつかの属性を使用する必要があります。 基本的な手順は次のとおりです。 1. 要素の外側のレイヤーに p を配置し、そのレイヤーを設定します。 style: float: left; overflow: hidden; 2. 外側のレイヤーを配置します。 レイヤーの p 位置属性を相対に設定し、上と左の値を両方とも 50% に設定します。 style:transform:translate(-50%, -50%);

上記の記事では CSS 要素のセンタリングについて簡単に説明していますので、参考にしていただければ幸いです。 PHP 中国語 Web サイトをサポートしていただければ幸いです。

CSS 要素のセンタリングの詳細な説明と関連記事については、PHP 中国語 Web サイトに注目してください。