Bagaimana untuk memusatkan css

Dalam reka bentuk bahagian hadapan web, elemen berpusat adalah keperluan biasa. Antaranya, CSS ialah kaedah yang paling biasa digunakan Dengan menetapkan peraturan gaya, anda boleh memusatkan elemen dengan cepat. Dalam artikel ini, kami akan meneroka pelbagai kaedah pemusatan CSS dan memberikan beberapa contoh kod praktikal.

Kaedah 1: Gunakan atribut text-align:center

Kaedah ini sesuai untuk elemen sebaris berpusat, seperti teks, gambar, butang, dsb. Langkah-langkahnya sangat mudah, cuma tetapkan text-align:center pada elemen induk bagi elemen yang diingini, seperti yang ditunjukkan di bawah:

<div style="text-align:center;">
  <p>居中的文本</p>
  <img src="example.jpg" alt="居中的图片">
  <button>居中的按钮</button>
</div>

Adalah penting untuk ambil perhatian apabila menggunakan kaedah ini bahawa elemen yang dikehendaki mestilah sebaris elemen atau Elemen blok sebaris, secara lalai, atribut lebar elemen peringkat blok akan ditetapkan kepada lebar 100% Sebaik-baiknya gunakan kaedah ini untuk memusatkan elemen dan cuba mengawal atribut lebarnya untuk mengelakkan kesan yang tidak perlu.

Kaedah 2: Gunakan margin ke tengah

Kaedah ini sesuai untuk memusatkan elemen peringkat blok. Iaitu, jika anda ingin memusatkan div, iaitu, menyelaraskannya secara mendatar di tengah halaman, anda boleh mencapainya dengan kod berikut:

div{
  width:500px; /*自己定义宽度*/
  margin: 0 auto;
}

Prinsip di sebalik kaedah ini sangat mudah, iaitu ialah, menetapkan nilai yang sama di sebelah kiri dan kanan jidar unsur, jadi elemen dipusatkan secara mendatar. Perlu diingatkan bahawa lebar elemen mesti ditetapkan sebelum kaedah ini boleh digunakan, jika tidak, tetapan margin tidak akan berkuat kuasa.

Kaedah 3: Gunakan reka letak fleksibel

Jika tapak web anda dijalankan dalam penyemak imbas baharu, maka menggunakan reka letak fleksibel akan menjadi kaedah pemusatan terbaik. Ini kerana susun atur fleksibel ialah sistem susun atur yang sangat berkuasa dan fleksibel yang boleh mengawal kedudukan, saiz dan jarak elemen dengan tepat.

Untuk menggunakan susun atur fleksibel untuk pemusatan, anda perlu menetapkan elemen induk elemen yang diingini sebagai bekas reka letak fleksibel, dan kemudian tetapkan elemen dalamannya sebagai item fleksibel. Berdasarkan ini, selaraskan dan tengahkan elemen dengan menetapkan sifat flex.

Berikut ialah kod sampel mudah:

<div class="container">
  <p>居中的文本</p>
  <img src="example.jpg" alt="居中的图片">
  <button>居中的按钮</button>
</div>

<style>
.container{
  display:flex;
  justify-content:center; /*控制元素水平居中*/
  align-items:center; /*控制元素垂直居中*/
}
</style>

Apabila menggunakan reka letak fleksibel, anda boleh menggunakan atribut yang berbeza untuk kawalan lanjutan, seperti kandungan penjajaran, balut lentur, dsb., untuk mencapai kesan susun atur yang lebih berkuasa.

Kaedah 4: Gunakan reka letak grid

Jika anda perlu menggunakan kaedah yang lebih maju untuk memusatkan, maka menggunakan reka letak grid akan menjadi pilihan yang lebih baik. Berbanding dengan susun atur fleksibel, susun atur grid boleh mengawal kedudukan dan saiz elemen dengan lebih baik, dan lebih mudah untuk mencapai kesan susun atur yang kompleks.

Apabila menggunakan reka letak grid, anda perlu menetapkan elemen induk bagi elemen yang diingini sebagai bekas grid, dan kemudian tetapkan item grid pada elemen anak. Anda boleh mengawal reka letak bekas dengan menggunakan sifat seperti lajur-templat-grid dan baris-templat-grid, dan anda juga boleh menggunakan sifat seperti baris-baris dan lajur grid untuk mengawal kedudukan elemen dengan tepat.

Berikut ialah kod sampel mudah:

<div class="container">
  <p class="item">居中的文本</p>
  <img class="item" src="example.jpg" alt="居中的图片">
  <button class="item">居中的按钮</button>
</div>

<style>
.container{
  display:grid;
  justify-content:center;
  align-items:center;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:100px 100px;
}
.item{
  justify-self:center;
  align-self:center;
}
</style>

Dalam contoh ini, kami menyediakan reka letak grid dengan 3 lajur dan 2 baris, dan kemudian menetapkan 3 sub-item sebagai item grid. Gunakan sifat justify-self dan align-self untuk menjajarkan elemen secara mendatar dan menegak.

Ringkasan

Sama ada anda perlu memusatkan elemen sebaris, elemen peringkat blok atau reka letak yang lebih kompleks melalui sistem susun atur lanjutan, CSS menyediakan alatan yang berkuasa untuk menyelesaikan semua tugasan ini. Sama ada anda menggunakan sifat penjajaran teks dan jidar yang ringkas, gunakan reka letak flex dan grid, atau melaksanakan reka letak JavaScript yang canggih, CSS boleh membantu anda melengkapkan tapak web yang cantik, boleh dipercayai dan dioptimumkan.

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