pusat batal css

Pemusatan Batal CSS

CSS ialah bahagian penting dalam reka bentuk web, ia boleh mengawal pelbagai gaya dalam halaman, termasuk fon, saiz, warna, reka letak, dsb. Antaranya, pemusatan ialah kesan tetapan taip biasa, yang boleh memusatkan elemen secara mendatar atau menegak di tengah skrin, menjadikan halaman lebih cantik. Walau bagaimanapun, dalam beberapa kes kita perlu uncenter elemen, dan artikel ini akan membincangkan cara untuk mencapai ini.

Batalkan pemusatan mendatar

Untuk membatalkan kesan pemusatan mendatar sesuatu elemen, kita perlu terlebih dahulu memahami prinsip pelaksanaannya. Biasanya, kami menggunakan atribut margin untuk mencapai pemusatan mendatar, dan menetapkan nilai margin kiri dan kanan kepada auto. Sebagai contoh, kod berikut boleh memusatkan elemen div secara mendatar:

div {
  width: 300px;
  margin: 0 auto;
}

Walau bagaimanapun, bagaimana jika kita mahu membatalkan kesan pemusatan mendatar elemen ini? Terdapat dua cara untuk melakukan ini. Satu adalah untuk menetapkan nilai jidar kiri dan kanan kepada nilai tertentu, contohnya:

div {
  width: 300px;
  margin: 0 50px;
}

Kod di atas mengalihkan elemen div ke kanan sebanyak 50 piksel, sekali gus membatalkan kesan pemusatan mendatarnya. Nilai tertentu boleh diselaraskan mengikut keadaan sebenar untuk mencapai kesan yang diingini.

Cara lain ialah menggunakan reka letak fleksibel. Reka letak fleksibel boleh mengawal susun atur elemen dengan tepat, termasuk kesan seperti pemusatan dan jarak. Kita boleh mengawal kedudukan mendatar elemen dengan menetapkan atribut paparan elemen induk kepada lentur dan kemudian menggunakan atribut justify-content. Contohnya, kod berikut boleh memusatkan elemen div secara mendatar ke kiri:

.container {
  display: flex;
  justify-content: flex-start;
}

div {
  width: 300px;
}

Batalkan pemusatan menegak

Kaedah pelaksanaan pemusatan menegak adalah serupa dengan pemusatan mendatar, biasanya menggunakan kod berikut:

div {
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

Kod di atas memusatkan elemen div secara menegak dan mendatar dalam elemen induk. Jika kita hanya mahu membatalkan kesan pemusatan menegak, kita boleh menetapkan atribut align-item kepada nilai lain, seperti:

div {
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

Kod di atas menggerakkan elemen div ke atas, sekali gus membatalkan kesan pemusatan menegaknya. Begitu juga, nilai tertentu boleh diselaraskan mengikut keadaan sebenar untuk mencapai kesan yang diingini.

Ringkasan

CSS boleh mencapai pelbagai kesan reka letak seperti memusatkan dan tidak memusatkan Kesan ini boleh menjadikan halaman lebih cantik dan boleh dibaca. Apabila kita perlu membatalkan kesan pemusatan elemen, kita boleh berbuat demikian dengan melaraskan nilai margin atau menggunakan reka letak fleksibel. Pada masa yang sama, kita juga harus menggunakan teknik di atas dengan munasabah untuk menjadikan halaman tersebut memberikan kesan reka letak yang terbaik.

Atas ialah kandungan terperinci pusat batal css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!