Bagaimanakah Saya Boleh Memusatkan Teks Dalam Bekas Flex Apabila Kandungan Melebihi Lebar Bekas?

Isu Penjajaran Teks dengan Bekas Flex

Apabila menggunakan bekas fleksibel (paparan: flex), mungkin terdapat kesukaran untuk menjajarkan teks apabila kandungan melebihi lebar bekas. Untuk memahami isu ini, adalah penting untuk menyelidiki struktur HTML bekas fleksibel.

Struktur Tiga Peringkat

Bekas fleksibel terdiri daripada tiga lapisan berbeza:

• Bekas: Bekas fleksibel itu sendiri
• Item: Item fleksibel individu
• Kandungan: Elemen(s) dalam item

Setiap lapisan mewakili entiti bebas, bermakna sifat penjajaran yang ditetapkan pada bekas dan item tidak menjejaskan penjajaran kandungan secara langsung.

Justify-Content dan Penjajaran Teks

Sifat justify-content mengawal penjajaran item flex dalam bekas. Ia tidak mengawal penjajaran kandungan secara langsung dalam item.

Apabila justify-content: center digunakan pada bekas arah baris, item flex akan mengecut mengikut lebar kandungannya dan menjadi berpusat secara mendatar . Walau bagaimanapun, jika kandungan melebihi lebar bekas, item tidak boleh dipusatkan.

Dalam senario ini, kandungan dijajar ke kiri secara lalai, tanpa mengira tetapan justify-content. Untuk memusatkan teks secara eksplisit, anda perlu menggunakan text-align: center pada item flex atau bekasnya.

Contoh Demonstrasi

Dalam coretan CSS yang disediakan, kelas flex menggunakan justify-content : tengah, tetapi kandungan membalut dan menjajar ke kiri apabila lebarnya melebihi lebar bekas.

Dengan menambahkan text-align: center pada kelas .center, yang digunakan pada elemen p, teks menjadi berpusat dengan betul, walaupun dengan lebar kandungan yang berlebihan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memusatkan Teks Dalam Bekas Flex Apabila Kandungan Melebihi Lebar Bekas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!