特に画面のサイズ変更中に、回転した要素を完全に中央に配置するにはどうすればよいですか?

特に画面のサイズ変更時に、中央に配置された要素が中央から外れます

三角形ポインターの水平方向の位置合わせは、特にウィンドウ サイズの調整中に、依然としてとらえどころがありません。

犯人は、三角形を中心にするために誤って left: 48% を使用したことにあります。これにより要素が中央に配置されているように見えますが、実際にはポインタの左端がコンテナの中心近くに配置されます。

真の中央配置の場合、正しいアプローチは左です: 50%。これにより、ポインタの中心がコンテナの中心に揃えられます。コンテナ。ただし、これにより新たな問題が発生します。left: 50% を使用すると要素が右にシフトします。

解決策は、translate(-50%,0) でtransform プロパティを利用することです。このルールは、三角形をその幅の 50% だけ左にシフトし、効果的に前と同じ線上の中央に配置するように指示します。

ただし、この特定のケースでは、transform:rotate(45deg) と transform:translate の両方を適用します。 (-50%,0) には課題があります。カスケードは 2 番目の変換ルールをオーバーライドし、無効にします。

これを解決するには、変換関数をチェーンする必要があります。修正されたコードは次のとおりです。

.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;
}

この修正されたコードにより、画面のサイズが変更された場合でも三角形ポインタが正しく中央に配置され、その位置が維持されるようになりました。

以上が特に画面のサイズ変更中に、回転した要素を完全に中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。