如何在視窗大小調整期間使三角形元素完美水平居中？

在調整視窗大小期間保持元素水平居中

問題：透過 CSS將元素水平居中調整視窗大小時可能會很棘手，特別是對於帶有三角形的元素

解決問題：為了確保元素保持水平居中，無論視窗大小如何，必須使用正確的CSS 屬性並了解元素定位的工作原理。雖然設定 left: 50% 看起來可能很直觀，但它實際上是根據元素的左邊緣而不是中心定位元素。

解：變換與平移實作真正的水平居中，通常使用transform:translate()屬性。此屬性指示元素將自身向後移動指定的寬度百分比，從而有效地將其居中於所需的軸上。

將轉換應用於現有代碼在提供的代碼中，三角形元素最初定位為left: 48%，這將其放置在靠近中心的位置，但不正確。為了調整這個，我們可以使用transform:translate(-50%, 0)規則將元素向後移動其寬度的50%，確保它完全居中。

連結變換 但是，提供的程式碼也包含一個transform:rotate(45deg)屬性，該屬性在transform:translate(-50%, 0)之前套用。這會導致由於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中文網其他相關文章！