Bagaimana untuk Memusatkan Elemen Segi Tiga Secara Mendatar Semasa Mengubah Saiz Tetingkap?

Mengekalkan Pemusatan Mendatar Elemen Semasa Saiz Semula Tetingkap

Masalah:
Memusatkan elemen secara mendatar melalui CSS boleh menjadi rumit apabila saiz tetingkap diubah, terutamanya untuk elemen dengan segi tiga bentuk.

Mengatasi Isu:
Untuk memastikan elemen kekal berpusat secara mendatar tanpa mengira saiz tetingkap, adalah penting untuk menggunakan sifat CSS yang betul dan memahami cara kedudukan elemen berfungsi. Semasa menetapkan ke kiri: 50% mungkin kelihatan intuitif, ia sebenarnya meletakkan elemen berdasarkan tepi kirinya, bukan tengah.

Penyelesaian: Ubah dan Terjemah
Untuk mencapai pemusatan mendatar sebenar , adalah perkara biasa untuk menggunakan sifat transform: translate(). Sifat ini mengarahkan elemen untuk mengalihkan dirinya kembali mengikut peratusan lebarnya yang ditentukan, dengan berkesan memusatkannya pada paksi yang dikehendaki.

Memohon Transformasi kepada Kod Sedia Ada
Dalam kod yang disediakan, elemen segi tiga pada mulanya diletakkan dengan kiri: 48%, yang meletakkannya dekat dengan tengah tetapi tidak betul. Untuk melaraskan ini, kita boleh menggunakan peraturan transformasi: translate(-50%, 0) untuk mengalihkan elemen ke belakang sebanyak 50% daripada lebarnya, memastikan ia berpusat dengan sempurna.

Merantai Transformasi
Walau bagaimanapun, kod yang disediakan juga termasuk sifat transform: rotate(45deg), yang digunakan sebelum transform: terjemah(-50%, 0). Ini menyebabkan peraturan transform: translate() diabaikan disebabkan oleh lata CSS.

Untuk mengambil kira perkara ini, kita boleh menggabungkan kedua-dua transformasi menggunakan keupayaan sifat transformasi untuk merantai fungsi. Peraturan CSS terakhir untuk elemen segi tiga ialah:

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

Dengan merantai fungsi transformasi dalam susunan ini (terjemah() dahulu, diikuti dengan rotate()), kami memastikan elemen itu dialihkan dahulu ke belakang sebanyak 50% daripada lebarnya dan kemudian diputar sebanyak 45 darjah. Ini memastikan bahawa segi tiga kekal mendatar tengah walaupun apabila saiz tetingkap diubah.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Elemen Segi Tiga Secara Mendatar Semasa Mengubah Saiz Tetingkap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!