Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk memusatkan teks css

Bagaimana untuk memusatkan teks css

WBOY
WBOYasal
2023-05-27 14:27:3813144semak imbas

Apabila mereka bentuk halaman, reka letak teks amat penting. Bagi kaedah pemusatan teks dalam CSS, ia boleh dicapai dalam tiga cara berikut.

1. text-alignAtribut

text-align atribut boleh digunakan untuk mengawal penjajaran mendatar teks, termasuk penjajaran kiri, penjajaran kanan, tengah dan penjajaran pada kedua-dua hujungnya.

div{
  text-align: center;
}

di mana center bermaksud berpusat Selepas menggunakan atribut ini dan menetapkan nilai kepada center, teks akan dijajarkan secara automatik di tengah. atribut

2. line-height atribut

line-height mewakili ketinggian garisan, yang boleh digunakan untuk menetapkan pemusatan menegak elemen sebaris. Apabila anda menetapkan ketinggian garisan sama dengan ketinggian kotak, teks dipusatkan secara menegak.

div{
  height: 200px;
  line-height: 200px;
  text-align: center;
}

Dengan cara ini, teks boleh dipusatkan.

3. atribut display dan text-align

boleh menukar elemen teks kepada reka letak kotak yang fleksibel melalui atribut display dan kemudian mengawal pemusatan mendatar melalui justify-content atribut. Atribut justify-content boleh ditetapkan kepada nilai yang berbeza, termasuk center, flex-start dan flex-end, yang masing-masing mewakili pemusatan, dijajar ke kiri, dijajarkan ke kanan, dsb.

div{
  display: flex;
  justify-content: center;
}

Di atas ialah tiga kaedah untuk mendatar memusatkan teks Cina dalam CSS, yang boleh digunakan secara fleksibel untuk menjadikan halaman lebih cantik. Jika anda perlu memusatkan teks secara menegak dan mendatar, anda boleh menggunakan gabungan dua kaedah di atas. Pada masa yang sama, perlu juga diperhatikan bahawa kaedah pemusatan yang digunakan oleh gaya elemen yang berbeza mungkin berbeza, dan kaedah yang sesuai mesti dipilih mengikut situasi tertentu.

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

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn