Bagaimana untuk menetapkan fon untuk dipusatkan dalam css

Menetapkan pemusatan fon dalam CSS adalah sangat penting untuk reka letak halaman web, terutamanya dalam peralihan daripada reka bentuk responsif kepada reka bentuk peranti mudah alih. Dalam halaman web, kita selalunya perlu memusatkan fon tajuk, perenggan, menu navigasi dan elemen lain untuk meningkatkan kebolehbacaan dan estetika halaman. Seterusnya, artikel ini akan memperkenalkan secara ringkas cara menggunakan CSS untuk memusatkan fon.

1. Pemusatan mendatar

Dalam CSS, terdapat beberapa cara untuk mencapai pemusatan mendatar teks. Kaedah ini diperkenalkan di bawah:

1. text-align: center

Atribut penjajaran teks mengawal penjajaran teks, termasuk penjajaran kiri (kiri) dan penjajaran kanan. (kanan), penjajaran tengah (tengah), penjajaran berselerak (justify) dan penjajaran kedua-dua hujung (text-justify), dsb. Untuk memusatkan teks secara mendatar, hanya tetapkan sifat penjajaran teks bagi elemen tempat teks berada di tengah.

Contohnya:

Ini ialah tajuk

< ;/ center>

boleh ditulis semula sebagai:

h1 {
text-align: center;
}

2. margin: auto

Atribut jidar digunakan untuk mengawal jidar elemen, termasuk jidar atas, jidar bawah, jidar kiri dan jidar kanan. Jika anda menetapkan kedua-dua jidar kiri dan kanan elemen kepada auto, elemen itu akan dipusatkan secara mendatar.

Contohnya:

h1 {
margin: auto;
}

2 Pempusatan menegak

tanpa menyatakan ketinggian , menegak pemusatan elemen sukar dicapai. Tetapi dalam beberapa kes tertentu, kita masih boleh mencapai pemusatan menegak elemen Berikut ialah beberapa kaedah:

1. garis-tinggi

garisan penetapan atribut ketinggian-garis Ketinggian ialah. jarak antara baris. Jika anda menetapkan ketinggian garisan sama dengan ketinggian elemen, teks akan dipusatkan secara menegak.

Contohnya:

h1 {
tinggi: 100px;
line-height: 100px;
}

2. flexbox

Flexbox ialah mod susun atur baharu dalam CSS3, yang digunakan secara meluas dalam reka bentuk responsif dan reka bentuk peranti mudah alih. Reka letak Flexbox menggunakan bekas flex dan item flex untuk mencapai susun atur elemen yang adaptif dan bebas.

Untuk mencapai pemusatan menegak elemen, anda hanya perlu menetapkan bekas di mana elemen terletak untuk melentur dan menetapkan sifat justify-content dan align-itemnya ke tengah.

Contohnya:

.bekas {
paparan: flex;
justify-content: center;
align-item: center;
}

Di atas adalah beberapa kaedah untuk menetapkan pemusatan fon dalam CSS Kita boleh memilih kaedah yang sesuai mengikut susun atur dan keperluan halaman. Walaupun artikel itu hanya memperkenalkan kaedah ini secara ringkas, kemahiran dan mata pengetahuan ini masih penting untuk reka letak halaman web saya harap ia akan membantu semua orang.

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