IFE-タスク-04: 位置決めと中心化の問題_html/css_WEB-ITnose

今回のタスクは、下の図の灰色の要素を中央に配置することであり、黄色の扇形の要素は常にコンテナの境界線に取り付けられます。

理論的知識

ポジショニング要素については前の記事で説明しましたが、ここではそれらを比較します。

    | static | relative | absolute | fixed |    | ------| ------ | ------ | ------ |    | 普通流 | 普通流 | 脱离普通流 | 脱离普通流 |    | 无法设置位移 | 可以设置位移 | 可以设置位移 | 可以设置位移 |    | 正常位置 | 定位相对于初始位置 | 定位于非static的祖先元素 | 定位相对于浏览器窗口 |

センタリング

センタリングの問題を詳しく解説しています。ブロックレベル要素とインライン要素の中央揃えは異なります。

1. 水平方向の中央揃え

   ブロックレベル要素は、要素内のテキストを水平方向の中央揃えに設定することで、要素内のインライン要素を中央揃えにできます ({ text-align: center; })。ブロックレベル要素自体は、margin-left および margin-right を通じて auto に設定されます。これには理由があります（原文）、（W3C モデルでは）水平方向で、含まれる要素の親要素（ブロックを含む要素）の幅（幅）は、 margin-left、border-left、 padding-left、width、padding-right、border-right、margin-right は 7 つの属性によって決定されます。属性値のデフォルトは 0 または特定の値です。 width、margin-left、margin-right を auto に設定することもできます。

   • 3 つのうち 1 つが auto に設定されている場合、属性の幅は親要素の幅から長さを引いた値になります。他の 2 つは属性の値です。
   • 幅が固定でマージンが自動の場合、2 つのマージンが残りの幅を均等に分割します。
   • 3 つの属性すべてが auto に設定されている場合、マージンは 0 に設定され、幅は可能な限り広くなります。

   したがって、左右のマージンを設定することで、ブロック要素を水平方向に中央揃えにすることができます ({ margin: 0 auto; )。ただし、この方法では複数のブロック(inline-block)を横方向に中央揃えすることはできません。ただし、フレックス レイアウトを使用して、複数のブロック要素を水平方向に連続して中央に配置することができます。スタイル { display: flex; justify-content: center; を使用して、フレックス レイアウト要素を水平方向に中央揃えにします。

2. 垂直方向の中央揃え

   インライン要素には左右のパディングとマージンを設定できませんが、padding-top プロパティとpadding-bottom プロパティを設定することで垂直方向の中央揃えにすることができます。平等であること。幅の狭い画面上で複数行の要素が重なる場合は、line-height とwhite-space、{ line-height: required height; white-space: nowrap: } を垂直方向の中央に設定する必要があります。要素が表のセルの場合は、vertical-align = middle を使用します。もちろん、フレックス レイアウトも使用され、垂直レイアウトの場合は、フレックス コンテナーに flex-direction: 列が設定されます (コンテナーは固定の高さに設定する必要があることに注意してください)。

   ブロックレベル要素は高さを決定するかどうかに分かれます。高さが決まっている場合は、相対親要素内の絶対子要素の変位topを50%に設定し、margin-topを高さの半分の負の値に設定します。また、ボックス モデルに応じて、パディングとボーダーのサイズも考慮する必要があります。高さが不明な場合は、translateY を使用して要素を中央に配置する必要があります ({top:50%;transform:translateY(-50%))。最後に、フレックス レイアウトには、万能のメソッド {display:flex-direction:column; } も必要です。このプロパティの設定により、水平方向のセンタリングを維持することもできます。

3. 水平方向と垂直方向のセンタリング

   上記の 2 つの側面を組み合わせると、水平方向と垂直方向のセンタリングには 3 つの方法があると要約できます。

   • 幅と高さを把握する: コンテナーの幅と高さを考慮し、margin-top と margin-left を元の幅と高さの半分に設定し、それらを中央の位置に移動します。変位。 { margin: -{container / 2 } px 0 0 -{container / 2 }px; top: 50%; left: 50% }、ここでは W3c モデルのみを考慮し、IE モデルも境界線を取る必要があります。サイズを考慮して。
   • 幅と高さがわかりません: スタイル { 上: 50%; 左: 50%; 変換: 変換(-50%, -50%); を設定します。
   • Taiwan Balm flex: スタイル { display: flex; justify-content: center; を設定します。

練習

この質問では、水平方向と垂直方向の両方が中央にあり、幅と高さがわかっている必要があるため、最初の方法を使用しました。高さのパーセントは、絶対位置指定でのみ使用できます。

.content {    position: absolute;    background-color: #ccc;    height: 200px;    width: 400px;    margin: -100px 0 0 -200px;    top: 50%;    left: 50%;}

そのコンテナスタイル要素の結果は以下のようになります。

2 つの四分円は、丸い境界線の border-radius 設定を使用する必要があります。単一の半径を設定するための構文は、border-radius です。左。コンテナの境界線に合わせて、左上の円の半径を 3 番目の値に設定し、要素のオフセットを上部に設定し、左をゼロに設定する必要があります。

.leftquarter {    top: 0;    left: 0;    -moz-border-radius: 0  0 50px 0; /* 四分之一圆 */    -webkit-border-radius: 0  0 50px 0;    border-radius: 0  0 50px 0;}

同様に、右下隅の円の半径を最初の値に設定し、コンテナの右下隅に合わせます。

.rightquarter {    right: -350px;    bottom: -100px;    -moz-border-radius: 50px 0 0 0; /* 四分之一圆 */    -webkit-border-radius: 50px 0 0 0;    border-radius: 50px 0 0 0;    }

もちろん、それらは共通のスタイルの位置を継承します: 要素の変位の設定に対する相対位置。

.element {position:相対;background-color:#fc0;height:50px; width:50px; }

ブラウザウィンドウがどのように変化しても、結果は次のようになります。要素は常に中央に配置されます。

デモアドレス 。

参考：

センタリング方法の詳細説明

CSSグラフィック作成チートシート