ウィンドウのサイズ変更中に三角形要素を水平方向に完全に中央に配置するにはどうすればよいですか?

ウィンドウのサイズ変更中に要素の水平方向の中央揃えを維持する

問題:
CSS を使用して要素を水平方向に中央揃えにするウィンドウのサイズを変更するとき、特に三角形の要素の場合は注意が必要です。 shape.

問題への対処:
ウィンドウ サイズに関係なく要素が水平方向の中央に配置されるようにするには、正しい CSS プロパティを使用し、要素の配置がどのように機能するかを理解することが重要です。 「左: 50%」に設定すると直感的に見えるかもしれませんが、実際には中心ではなく左端に基づいて要素が配置されます。

解決策: 変換と移動
真の水平方向のセンタリングを実現するには、transform:translate() プロパティを使用するのが一般的です。このプロパティは、要素がその幅の指定された割合だけ後方にシフトし、効果的に目的の軸の中心に配置されるように指示します。

既存のコードへの変換の適用
提供されたコードでは、三角形要素は最初は left: 48% に配置されており、中心近くに配置されますが、正しくありません。これを調整するには、transform:translate(-50%, 0) ルールを使用して要素を幅の 50% だけ後方にシフトし、要素が完全に中央に配置されるようにします。

変換の連鎖
ただし、提供されたコードには、transform: replace(-50%, 0) の前に適用される、transform:rotate(45deg) プロパティも含まれています。これにより、CSS カスケードにより、transform:translate() ルールが無視されます。

これを解決するには、transform プロパティの関数を連鎖する機能を使用して、両方の変換を組み合わせることができます。三角形要素の最終的な CSS ルールは次のようになります:

.container::before {
    top: -33px;
    left: 50%;
    transform: translate(-50%, 0) rotate(45deg);
    position: absolute;
    border: solid #C2E1F5;
    border-width: 4px 0 0 4px;
    background: #88B7D5;
    content: '';
    width: 56px;
    height: 56px;
}

変換関数をこの順序 (translate() が最初に、次にrotate() が続く) で連鎖させることにより、要素が最初にシフトバックされることが保証されます。幅の 50% だけ拡大し、45 度回転します。これにより、ウィンドウのサイズが変更された場合でも、三角形は水平方向の中央に維持されます。

以上がウィンドウのサイズ変更中に三角形要素を水平方向に完全に中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。