Bagaimana untuk Memusatkan Kotak Tengah Antara Kotak Sisi Bersaiz Tidak Sama Dengan Hanya Menggunakan CSS?

Memastikan Item Tengah Berpusat di Tengah-tengah Item Sisi Tidak Sama

Pengenalan

Apabila mereka bentuk susun atur yang melibatkan kotak bersebelahan dengan lebar yang berbeza-beza, perkara biasa cabaran adalah untuk mengekalkan pemusatan kotak tengah. Artikel ini meneroka penyelesaian CSS untuk mencapai kesan ini.

Penyelesaian CSS Menggunakan Flexbox

Untuk memusatkan kotak tengah tanpa mengira lebar kotak sisi, kami boleh memanfaatkan flexbox dan margin auto:

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

Ciri Utama

• Tulen CSS: Tiada perpustakaan tambahan atau JavaScript diperlukan.
• Tiada Kedudukan Mutlak: Elemen diletakkan menggunakan flexbox, menghapuskan keperluan untuk kedudukan mutlak.
• Penjajaran Dinamik: Kotak tengah kekal di tengah tanpa mengira lebar kotak sisi.

Butiran Pelaksanaan

• Kotak .bekas ialah kotak lentur yang membalut ketiga-tiga elemen .kotak.
• Setiap .kotak juga merupakan flexbox, dengan justify-content: tengah untuk menjajarkan kandungan dalamannya secara mendatar.
• flex: 1 menyebabkan setiap .kotak membesar untuk mengisi ruang yang tersedia secara sama rata.
• Jing pada elemen dalam memastikan bahawa tepi kotak sisi sentiasa menyentuh tepi bekasnya.
• Jing automatik kembangkan atau kecilkan jika perlu untuk mengekalkan penjajaran tengah kotak tengah.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Kotak Tengah Antara Kotak Sisi Bersaiz Tidak Sama Dengan Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!