Bagaimana untuk Memusatkan Item Tengah dalam Reka Letak Mendatar dengan Lebar Adik Beradik Tidak Sama?

Mengekalkan Penjajaran Pusat untuk Item Tengah dengan Lebar Adik Beradik yang Pelbagai

Soalan ini menangani cabaran untuk memusatkan item tengah dalam susun atur mendatar apabila lebar item sisinya mungkin berbeza-beza. Kesan yang diingini adalah untuk memastikan bahawa item tengah kekal di tengah walaupun item sisi mempunyai saiz yang tidak sama.

Untuk mencapai ini, pendekatan flexbox bersarang digunakan. Peraturan CSS berikut membentuk teras penyelesaian:

.container {
    display: flex;
}

.box {
    flex: 1;
    display: flex;
    justify-content: center;
}

.box:first-child > div { margin-right: auto; }

.box:last-child > div { margin-left: auto; }

Di dalam bekas, setiap kotak diberi kelenturan 1, memastikan ia berkongsi ruang yang tersedia secara berkadar. Setiap kotak kemudiannya dipaparkan sebagai bekas fleksibel dengan justify-content: tengah ke tengah kandungannya.

Untuk kotak pertama, jidar kanan digunakan pada elemen anaknya menggunakan margin-kanan: auto, dan sebaliknya, margin kiri digunakan pada elemen anak kotak terakhir menggunakan margin-left: auto. Ini membolehkan jidar berkembang secara automatik, menolak kandungan ke tepi masing-masing, menjajarkan kotak tengah di tengah dengan berkesan.

Penyelesaian ini mencapai kesan yang diingini, memastikan item tengah kekal di tengah tanpa mengira lebarnya kotak adik beradik. Ia adalah penyelesaian CSS tulen yang tidak memerlukan skrip tambahan atau kedudukan mutlak.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Item Tengah dalam Reka Letak Mendatar dengan Lebar Adik Beradik Tidak Sama?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!