Bagaimanakah Saya Boleh Memusatkan Elemen Diputar dengan Sempurna, Terutamanya Semasa Saiz Semula Skrin?

Elemen Berpusat Eludes Center, Terutamanya semasa Saiz Semula Skrin

Penjajaran mendatar penuding segi tiga terus sukar difahami, terutamanya semasa pelarasan saiz tetingkap.

Pesalah terletak pada tersilap menggunakan kiri: 48% untuk memusatkan segitiga. Walaupun ini seolah-olah memusatkan elemen, ia sebenarnya meletakkan pinggir kiri penuding berhampiran pusat bekasnya.

Untuk pemusatan sebenar, pendekatan yang betul dibiarkan: 50%, yang menjajarkan pusat penuding dengan bekas itu. Walau bagaimanapun, ini memperkenalkan masalah baharu: elemen dianjak ke kanan apabila menggunakan kiri: 50%.

Penyelesaiannya ialah menggunakan sifat transformasi dengan translate(-50%,0). Peraturan ini mengarahkan segitiga untuk beralih ke kiri sebanyak 50% daripada lebarnya, dengan berkesan memusatkannya pada garis yang sama seperti sebelumnya.

Dalam kes khusus ini, walau bagaimanapun, menggunakan kedua-dua transformasi: putar(45deg) dan ubah: terjemah (-50%,0) memberikan cabaran. Lata mengatasi peraturan transformasi kedua, menjadikannya tidak berkesan.

Untuk menyelesaikannya, fungsi transformasi rantaian diperlukan. Kod yang diperbetulkan 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;
}

Kod yang diubah suai ini kini memusatkan penuding segi tiga dengan betul dan mengekalkan kedudukannya walaupun skrin diubah saiz.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memusatkan Elemen Diputar dengan Sempurna, Terutamanya Semasa Saiz Semula Skrin?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!