Bagaimana untuk memusatkan teks dalam html

Cara memusatkan teks dalam HTML

Dalam reka bentuk web, kedudukan dan susun atur elemen halaman adalah sangat penting, dan susun atur teks adalah salah satu aspek penting. Kadangkala, kita perlu memusatkan teks untuk mencapai kesan visual dan pengalaman membaca yang lebih baik. Jadi, bagaimana untuk memusatkan teks dalam HTML?

Pertama sekali, kita perlu memahami beberapa tag HTML yang biasa digunakan, iaitu: "div", "p" dan "span". Ketiga-tiga teg ini sering digunakan dalam reka bentuk web Ia boleh mengandungi teks dan elemen HTML lain, dan juga boleh menetapkan gaya elemen. Berikut ialah penggunaan asas bagi tiga teg:

dc6dce4a544fdca2df29d5ac0ea9906bIni ialah teg div16b28748ea4df4d9c2150843fecfba68
e388a4556c0f65e1904146cc1a846beeIni ialah teg p94b3e26ee717c64999d7867364b1b4a3
< ; span>Ini ialah teg span54bdf357c58b8a65c66d7c19c8e4d114

Dalam proses memusatkan teks, kami biasanya menggunakan helaian gaya (CSS) untuk menetapkan gaya elemen. Khususnya, pemusatan teks boleh dicapai dalam tiga cara berikut:

1 Gunakan atribut penjajaran teks

Pemusatan teks secara amnya merujuk kepada pemusatan mendatar, iaitu, membiarkan teks menjadi. berpusat pada elemen Kedudukan tengah mendatar dipaparkan. Pada masa ini, kita boleh menggunakan atribut penjajaran teks untuk mencapai ini. Atribut ini boleh ditetapkan dalam gaya elemen Kod khusus adalah seperti berikut:

c9ccee2e6ea535a969eb3f532ad9fe89

div {
    text-align: center;
}

531ac245ce3e4fe3d50054a55f265927
dc6dce4a544fdca2df29d5ac0ea9906bIni ialah teks berpusat 16b28748ea4df4d9c2150843fecfba68

Dalam kod di atas, kami mula-mula mentakrifkan gaya dan menentukan bahawa atribut penjajaran teks ditetapkan ke tengah, menunjukkan bahawa penjajaran ditengah. Kemudian panggil gaya ini dalam teg "div" untuk mencapai paparan berpusat teks.

2. Gunakan atribut margin

Selain atribut penjajaran teks, kita juga boleh menggunakan atribut margin untuk mencapai kesan pemusatan teks. Khususnya, anda boleh menetapkan nilai margin-kiri dan margin-kanan kepada auto dalam gaya elemen, seperti berikut:

c9ccee2e6ea535a969eb3f532ad9fe89

div {
    width: 50%;
    margin: 0 auto;
}

dc6dce4a544fdca2df29d5ac0ea9906bIni ialah teks berpusat16b28748ea4df4d9c2150843fecfba68

Dalam kod di atas, kami menetapkan elemen "div" dengan lebar 50% dan menetapkan atribut margin kepada 0 auto . 0 di sini bermakna jidar atas dan bawah ialah 0, dan auto bermaksud jidar kiri dan kanan berpusat. Ini mencapai paparan berpusat teks.

3 Gunakan atribut paparan dan penjajaran teks

Untuk beberapa elemen sebaris (seperti "span"), atribut jidar tidak boleh mencapai penjajaran tengah. Pada masa ini, kita boleh menggunakan atribut paparan dan penjajaran teks untuk mencapai matlamat ini. Khususnya, anda boleh menetapkan atribut paparan elemen "span" kepada "sekat", dan kemudian gunakan atribut penjajaran teks untuk memusatkan teks, seperti yang ditunjukkan di bawah:

c9ccee2e6ea535a969eb3f532ad9fe89

span {
    display: block;
    text-align: center;
}

531ac245ce3e4fe3d50054a55f265927
45a2772a6b6107b401db3c9b82c049c2Ini ialah teks berpusat54bdf357c58b8a65c66d7c19c8e4d114

Dalam kod di atas, kami mula-mula menetapkan atribut paparan elemen "span" untuk menyekat , supaya ia boleh menetapkan lebar dan tinggi. Kemudian tetapkan atribut penjajaran teks ke tengah untuk memusatkan teks.

Ringkasan

Tiga kaedah di atas adalah kaedah yang sangat biasa untuk mencapai pemusatan teks Kaedah yang mana untuk digunakan bergantung pada situasi sebenar dan keutamaan peribadi. Tidak kira kaedah mana yang digunakan, anda perlu menentukan atribut dan nilai yang sepadan dalam gaya elemen untuk menukar penjajaran. Pada masa yang sama, anda juga perlu memberi perhatian kepada penggunaan dan peraturan tatabahasa bagi tag yang berbeza, dan mengikut prinsip semantik untuk meningkatkan kebolehbacaan dan kebolehselenggaraan kod.

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