Petua CSS: Cara Melaksanakan Reka Letak Jajaran Tengah

Petua CSS: Cara melaksanakan susun atur sejajar tengah

Dalam reka bentuk web, susun atur sejajar tengah sering digunakan. Sama ada teks menjajarkan tengah, imej atau keseluruhan reka letak halaman, semuanya boleh dicapai melalui CSS. Artikel ini akan memperkenalkan beberapa teknik CSS untuk mencapai reka letak sejajar tengah dan memberikan contoh kod khusus.

Mula-mula, mari lihat cara melaksanakan reka letak berpusat mendatar. Berikut ialah contoh kod untuk beberapa elemen biasa:

1. Penjajaran tengah teks:

.text-center {
  text-align: center;
}

2. Penjajaran tengah imej:

.img-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

3. Elemen aras blok (seperti div) penjajaran tengah: 🜎t

   .div-center {
     margin-left: auto;
     margin-right: auto;
   }

:

Lihat cara melaksanakan reka letak berpusat menegak. Berikut ialah contoh kod untuk beberapa elemen biasa:

Penjajaran pusat teks satu baris:

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

Penjajaran pusat teks berbilang baris:

2. .multi-line {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
   }

Elemen peringkat blok (seperti div)

3. .div-center {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
   }

Di atas ialah Beberapa teknik CSS biasa untuk mencapai reka letak sejajar tengah. Dengan petua ini, kami boleh melaksanakan pelbagai susun atur sejajar tengah dengan mudah. Saya harap contoh kod ini dapat membantu anda menguasai kemahiran CSS dengan lebih baik dan mencapai kesan reka letak yang anda inginkan.

Untuk meringkaskan, dengan menggunakan sifat dan nilai CSS, kita boleh mencapai susun atur penjajaran tengah mendatar dan penjajaran tengah menegak. Sama ada teks, imej atau elemen peringkat blok, semuanya boleh dipusatkan dan diselaraskan melalui kod CSS mudah. Menguasai teknik CSS ini akan membawa kesan yang lebih cantik dan profesional kepada reka bentuk web anda.

Atas ialah kandungan terperinci Petua CSS: Cara Melaksanakan Reka Letak Jajaran Tengah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!