Bagaimana untuk memusatkan fon css

Dalam reka bentuk web, pemusatan fon memainkan peranan penting dalam keseluruhan estetika halaman. CSS menyediakan pelbagai kaedah untuk mencapai kesan pemusatan fon Berikut ialah beberapa kaedah pelaksanaan yang biasa digunakan.

1 Gunakan atribut text-align

Text-align ialah salah satu atribut yang paling biasa digunakan dalam CSS, yang boleh menyelaraskan tengah kandungan teks elemen secara mendatar. Secara lalai, nilai atribut penjajaran teks ditinggalkan, yang bermaksud kandungan teks dalam elemen akan dijajarkan ke kiri. Jika anda perlu menjajarkan tengah kandungan teks, anda perlu menetapkan nilai atribut penjajaran teks ke tengah. Contohnya:

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

Nota: Atribut penjajaran teks hanya berfungsi pada kandungan teks dan tidak mempunyai kesan pada elemen lain (seperti gambar).

2. Gunakan atribut line-height

line-height ialah atribut yang mentakrifkan ketinggian baris. Ia boleh mengawal jarak baris teks dalam elemen. Kita boleh menetapkan nilai ketinggian garisan supaya sama dengan ketinggian bekas, supaya teks boleh dipusatkan secara menegak dalam bekas. Seperti yang ditunjukkan dalam kod berikut:

<div style="height:200px;line-height:200px;text-align:center;">这是居中对齐的文本</div>

Nota: Menggunakan ketinggian garisan untuk mencapai penjajaran tengah memerlukan teks hanya mempunyai satu baris dan anda perlu mengetahui ketinggian bekas untuk menetapkan nilai ketinggian garisan.

3 Gunakan atribut paparan dan penjajaran teks

Kaedah ini memerlukan terlebih dahulu menukar elemen untuk dijajarkan di tengah kepada elemen blok (secara lalai, teks adalah semua elemen sebaris), dan kemudian Kemudian gunakan text-align:center untuk mencapai kesan penjajaran tengah. Seperti yang ditunjukkan dalam kod berikut:

<style>
.center{
    display:block;
    text-align:center;
}
</style>
<div class="center">这是居中对齐的文本</div>

Nota: Menggunakan atribut paparan dan penjajaran teks untuk mencapai penjajaran tengah memerlukan elemen sasaran mestilah elemen blok.

4 Gunakan atribut transform

Kaedah ini memerlukan penambahan atribut transformasi pada gaya elemen sasaran, dan kemudian menetapkan nilai atribut translateY kepada -50%. Seperti yang ditunjukkan dalam kod berikut:

<div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);">这是居中对齐的文本</div>

Nota: Gunakan atribut transformasi untuk mencapai penjajaran tengah dan elemen sasaran perlu ditetapkan kepada kedudukan mutlak (kedudukan:mutlak).

Ringkasan:

Di atas ialah beberapa kaedah yang biasa digunakan dalam CSS untuk memusatkan fon. Anda perlu memilih kaedah yang sesuai mengikut situasi sebenar untuk mencapai kesan penjajaran tengah. Pada masa yang sama, memilih kaedah berbeza untuk elemen dan situasi teks yang berbeza juga boleh meningkatkan estetika halaman dengan lebih baik.

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