Bagaimana untuk menetapkan pemusatan mendatar dalam css

Dalam reka bentuk web, selalunya perlu untuk memusatkan elemen secara mendatar untuk meningkatkan keindahan keseluruhan dan kebolehbacaan halaman. Mari terangkan cara menggunakan CSS untuk mencapai pemusatan mendatar.

1. Gunakan atribut penjajaran teks

Atribut text-align digunakan untuk menetapkan penjajaran mendatar teks Untuk elemen peringkat blok, ia juga boleh digunakan untuk mengawal mendatar penjajaran elemen dalaman.

Sebagai contoh, jika kita menetapkan kod berikut:

<div style="text-align: center;">
  <p>这是一段文本内容</p>
</div>

maka teks perenggan akan ditengahkan.

Tetapi harus diingat bahawa kaedah ini hanya terpakai kepada elemen sebaris dan elemen yang diganti (seperti <img>). Untuk elemen peringkat blok, kaedah ini tidak boleh mencapai pemusatan mendatar.

2. Gunakan atribut margin

margin atribut boleh digunakan untuk menentukan saiz kawasan kosong di sekeliling elemen Kita boleh mencapai pemusatan mendatar dengan menetapkan nilai kiri dan kanan margin.

Sebagai contoh, kami menetapkan kod berikut:

<div style="width: 200px; margin: 0 auto;">
  <p>这是一段文本内容</p>
</div>

di mana width digunakan untuk menetapkan lebar elemen dan margin daripada 0 bermaksud bahawa jidar atas dan bawah ialah 0, dan auto Menunjukkan bahawa jidar kiri dan kanan diperuntukkan secara automatik.

Dengan cara ini, elemen akan dipusatkan secara mendatar dalam elemen induk. Ambil perhatian bahawa kaedah ini hanya berfungsi pada elemen tahap blok lebar tetap.

3. Gunakan reka letak flexbox

flexbox ialah mod reka letak baharu Dengan menetapkan atribut display:flex elemen induk, anda boleh mencapai pemusatan mendatar bagi elemen anak.

Sebagai contoh, kami menetapkan kod berikut:

<div style="display: flex; justify-content: center;">
  <p>这是一段文本内容</p>
</div>

di mana display:flex digunakan untuk mendayakan reka letak flexbox dan justify-content:center bermaksud elemen anak dijajarkan secara mendatar di tengah-tengah unsur induk.

Kaedah ini bukan sahaja sesuai untuk elemen tahap blok lebar tetap, tetapi juga untuk elemen lebar berubah-ubah.

4. Gunakan reka letak Grid CSS

CSS Grid ialah kaedah reka letak grid baharu dalam CSS3, yang juga boleh mencapai pemusatan mendatar.

Sebagai contoh, kami menetapkan kod berikut:

<div style="display: grid; place-items: center;">
  <p>这是一段文本内容</p>
</div>

di mana display:grid digunakan untuk mendayakan reka letak CSS Grid dan place-items:center bermaksud elemen anak dijajarkan secara mendatar dan berpusat dalam grid.

Perlu diingatkan bahawa kaedah ini memerlukan sokongan pelayar yang lebih tinggi dan tidak sesuai untuk pelayar lama.

Ringkasnya, dalam pembangunan sebenar, kita perlu memilih kaedah yang berbeza untuk mencapai pemusatan mendatar berdasarkan situasi sebenar dan keperluan keserasian penyemak imbas.

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