Gunakan CSS3 fit-content untuk mencapai pemusatan mendatar elemen

Gunakan kandungan muat CSS3 untuk mencapai kesan pemusatan mendatar bagi elemen

Dalam pembangunan web, pemusatan mendatar elemen sentiasa menjadi keperluan biasa. Pada masa lalu, kami sering bergantung pada sifat CSS seperti flexbox, margin dan kedudukan untuk mencapai ini, tetapi kaedah ini mempunyai beberapa had dan isu keserasian. Nasib baik, atribut fit-content telah diperkenalkan dalam CSS3, yang memudahkan untuk mencapai kesan pemusatan mendatar bagi elemen.

Apakah sifat fit-content? Atribut fit-content ialah kaedah pelaksanaan saiz CSS3 Ia boleh mengira dan menetapkan lebar elemen berdasarkan kandungan elemen dan set min-width/max-width dan atribut lain. Khususnya, atribut fit-content boleh melaraskan lebar elemen secara automatik berdasarkan lebar kandungan elemen untuk mencapai kesan berpusat mendatar.

Untuk menggunakan atribut fit-content untuk mencapai kesan pemusatan mendatar, pertama sekali kita perlu menetapkan atribut paparan elemen kepada blok sebaris atau blok dan tetapkan lebar tetap pada elemen. Kemudian, kita perlu menggunakan beberapa sifat CSS pada elemen induk untuk mencapai pemusatan mendatar. Di bawah ini kami akan memperkenalkan dua kaedah untuk mencapai kesan ini.

Kaedah 1: Menggunakan flexbox

Mula-mula, kita perlu menetapkan atribut paparan elemen induk kepada flex dan atribut justify-content ke tengah. Dengan cara ini, elemen induk akan memusatkan elemen anak secara mendatar.

.parent {
  display: flex;
  justify-content: center;
}

.child {
  width: fit-content;
}

Kaedah 2: Gunakan atribut margin

Kaedah lain ialah menggunakan atribut margin untuk mencapai kesan pemusatan mendatar. Kita boleh menetapkan nilai jidar kiri dan kanan kepada auto untuk elemen induk, supaya jidar kiri dan kanan unsur induk akan diisi secara automatik, supaya unsur anak dipusatkan secara mendatar.

.parent {
  margin-left: auto;
  margin-right: auto;
}

.child {
  width: fit-content;
}

Perlu diambil perhatian bahawa atribut fit-content mungkin tidak disokong pada sesetengah penyemak imbas lama. Atas sebab keserasian, kami boleh menggunakan alternatif kepada kaedah flexbox atau margin.

Penyelesaian alternatif satu: Gunakan kaedah sel jadual

Jika kita perlu serasi dengan beberapa penyemak imbas lama, kita boleh menggunakan paparan: sel jadual dan penjajaran teks: tengah untuk mencapai pemusatan mendatar elemen. Kelemahan pendekatan ini ialah ia menganggap elemen sebagai sel jadual, yang mungkin memberi kesan pada gaya lain.

.parent {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.child {
  display: inline-block;
}

Alternatif 2: Gunakan kaedah penentududukan dan transformasi mutlak

Alternatif lain ialah kita boleh meletakkan elemen anak secara mutlak berbanding elemen induk dan menggunakan atribut transformasi untuk mencapai pemusatan mendatar. Walau bagaimanapun, perlu diingatkan bahawa menggunakan kedudukan mutlak boleh menjejaskan susun atur lain.

.parent {
  position: relative;
}

.child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Ringkasnya, menggunakan atribut fit-content CSS3, kita boleh mencapai kesan pemusatan mendatar elemen dengan lebih mudah. Pada masa yang sama, kami juga memperkenalkan penyelesaian alternatif untuk mencapai pemusatan mendatar menggunakan kaedah seperti flexbox, margin, sel jadual, dan kedudukan mutlak. Melalui kaedah yang berbeza, kita boleh memilih kaedah yang sesuai untuk mencapai kesan pemusatan mendatar mengikut keperluan khusus dan keperluan keserasian. Marilah kita menggunakan fungsi hebat CSS3 untuk membawa kesan gaya yang lebih kaya kepada pembangunan web.

Atas ialah kandungan terperinci Gunakan CSS3 fit-content untuk mencapai pemusatan mendatar elemen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!