為什麼我的水平居中三角形指針在調整大小時會發生移動？

螢幕調整大小期間三角形指針水平居中遇到問題

問題陳述

用戶打算水平居中三角形容器元素內的指針。雖然在某些視窗大小下成功，但調整視窗大小時指針會偏離對齊狀態。

解決方案

了解問題：

最初嘗試將指針向左居中：48% 根據其左邊緣定位指針。這種方法沒有考慮到元素的寬度，導致視窗大小變化時出現錯位。

使用變換實現居中：

要使三角形正確居中，需要建議使用變換屬性：

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

此規則將三角形的位置移動50%它的寬度，有效地將其在容器內居中。

將變換與旋轉結合：

在這個特定場景中，三角形元素還有一個變換：rotate(45deg)應用。但是，CSS 級聯規則會用第二個變換覆蓋第一個變換，從而防止水平居中。

要解決此問題，請連結變換函數：

.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中文網其他相關文章！