Beberapa kaedah pemusatan css

Dalam reka bentuk web, pemusatan adalah sangat penting untuk kecantikan dan kebolehbacaan. Dalam CSS, terdapat banyak cara untuk mencapai pemusatan Berikut adalah beberapa kaedah yang biasa digunakan.

1. Memusatkan teks

1. Memusatkan teks elemen sebaris

Untuk teks satu baris, kita boleh menggunakan atribut penjajaran teks untuk melengkapkan pemusatan.

<div style="text-align: center;">这里是居中的文本</div>

2. Teks elemen blok dipusatkan

Untuk teks berbilang baris atau elemen blok, kita boleh menggunakan atribut margin untuk menetapkan jidar kiri dan kanan kepada auto, dan tetapkan lebar kepada tidak 100% untuk melengkapkan pemusatan.

<div style="margin: 0 auto; width: 80%;">这里是居中的多行文本</div>

2. Pemusatan elemen

1. Pemusatan mendatar

Gunakan atribut jidar dan tetapkan jidar kiri dan kanan kepada auto untuk melengkapkan pemusatan mendatar.

<div style="margin: 0 auto;"></div>

2. Pemusatan menegak

Kaedah pemusatan menegak adalah lebih rumit dan terdapat banyak cara untuk melaksanakannya.

(1) Gunakan Flexbox

untuk menetapkan display:flex dan align-item:center pada elemen induk untuk mencapai pemusatan menegak.

<div style="display: flex; align-items: center; height: 200px;">
  <div>这里是垂直居中的元素</div>
</div>

(2) Gunakan sel jadual

untuk menetapkan display:table dan vertical-align:middle pada elemen induk dan tetapkan display:table-cell pada elemen anak untuk mencapai menegak pemusatan .

<div style="display: table; height: 200px; width: 100%;">
  <div style="display: table-cell; vertical-align: middle;">这里是垂直居中的元素</div>
</div>

(3) Gunakan mutlak

untuk menetapkan kedudukan:mutlak;atas:50%;kiri:50% dan ubah:terjemah(-50%,-50%) pada elemen anak , iaitu Pemusatan menegak adalah mungkin.

<div style="position: relative; height: 200px;">
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);">这里是垂直居中的元素</div>
</div>

(4) Gunakan ketinggian garis

untuk menetapkan ketinggian dan ketinggian garis sama pada elemen induk, dan tetapkan jajaran menegak:tengah dalam elemen anak untuk mencapai pemusatan menegak.

<div style="height: 200px; line-height: 200px;">
  <div style="display: inline-block; vertical-align: middle;">这里是垂直居中的元素</div>
</div>

Melalui kaedah di atas, kita boleh mencapai kesan pemusatan elemen dalam halaman web dengan mudah. Ia adalah perlu untuk memilih kaedah yang sesuai mengikut situasi tertentu untuk mencapai kesan visual yang lebih baik pada halaman.

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