サイズ変更中に水平方向の中央にある三角形のポインタが移動するのはなぜですか?

画面のサイズ変更中に三角形ポインターの水平方向の中央揃えに問題が発生する

問題の説明

ユーザーは三角形を水平方向の中央揃えにしようとしていますコンテナ要素内のポインタ。特定のウィンドウ サイズでは正常に動作しますが、ウィンドウのサイズを変更するとポインタの位置がずれます。

解決策

問題の理解:

ポインタを左の中央に配置する最初の試み: 48% は、左端に基づいてポインタを配置します。このアプローチでは要素の幅が考慮されていないため、ウィンドウ サイズが変化すると位置がずれることがあります。

トランスフォームを使用してセンタリングを実現します:

三角形を適切にセンタリングするには、次のようにします。変換プロパティを使用することをお勧めします:

.triangle {
   position: absolute;
   left: 50%;
   transform: translate(-50%,0);
}

このルールは、三角形の位置を次のようにシフトします。幅の 50% で、コンテナ内の中央に効果的に配置されます。

変換と回転の組み合わせ:

この特定のシナリオでは、三角形要素にも変換があります: 回転(45度)が適用されます。ただし、CSS カスケード ルールは最初の変換を 2 番目の変換でオーバーライドし、水平方向のセンタリングを防ぎます。

これに対処するには、変換関数を連鎖させます。

.container::before {
    left: 50%;
    transform: translate(-50%,0) rotate(45deg);
}

複数の変換関数を一緒に使用できます。リストされている順に適用します。この場合、最初に変換が適用され、次に回転が適用されます。

完全なコード スニペット:

body {
    background: #333333;
}

.container {
    width: 98%;
    height: 80px;
    line-height: 80px;
    position: relative;
    top: 20px;
    min-width: 250px;
    margin-top: 50px;
}

.container-decor {
    border: 4px solid #C2E1F5;
    color: #fff;
    font-family: times;
    font-size: 1.1em;
    background: #88B7D5;
    text-align: justify;
}

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

<div class="container container-decor">great distance</div>

以上がサイズ変更中に水平方向の中央にある三角形のポインタが移動するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。