Bagaimanakah anda mengawal penjajaran teks menggunakan harta Teks-Align?

Bagaimanakah anda mengawal penjajaran teks menggunakan harta selari teks?

Harta text-align dalam CSS digunakan untuk mengawal penjajaran teks dalam elemen. Harta ini boleh digunakan untuk unsur-unsur peringkat blok, seperti <div> , <code><p></p> , atau <h1></h1> ke <h6></h6> , untuk mengubah penjajaran teks dalam unsur-unsur ini. Untuk menggunakan harta text-align , anda menentukannya dalam peraturan CSS dan menetapkannya kepada salah satu nilai yang tersedia. Sebagai contoh, untuk memusatkan teks dalam elemen <p></p> , anda boleh menggunakan peraturan CSS berikut:

 <code class="css">p { text-align: center; }</code>

Peraturan ini akan memusatkan teks semua <p></p> elemen pada halaman. Anda boleh memohon harta text-align ke elemen tertentu dengan menggunakan ID atau pemilih kelas, atau kepada pelbagai elemen dengan menggunakan pemilih elemen seperti yang ditunjukkan di atas.

Apakah nilai-nilai yang berbeza yang boleh digunakan dengan harta penyaringan teks?

Harta text-align menerima beberapa nilai yang menentukan bagaimana teks dalam elemen diselaraskan. Nilai yang paling biasa digunakan ialah:

• Kiri : Selaraskan teks ke tepi kiri elemen. Ini adalah penjajaran lalai untuk kebanyakan bahasa yang dibaca kiri-ke-kanan.
• Kanan : Selaraskan teks ke tepi kanan elemen.
• Pusat : Pusat teks dalam elemen.
• Justify : membentangkan garis teks untuk menyelaraskan kedua -dua tepi kiri dan kanan dalam elemen. Ini kadang -kadang boleh membawa kepada jarak yang tidak sekata antara kata -kata.

Di samping itu, harta benda text-align juga menerima nilai-nilai yang kurang biasa berikut:

• Mula : Selaraskan teks ke tepi permulaan elemen, yang bersamaan dengan left untuk bahasa kiri-ke-kanan dan right untuk bahasa kanan ke kiri.
• Akhir : Selaraskan teks ke tepi akhir elemen, yang bersamaan dengan right untuk bahasa kiri-ke-kanan dan left untuk bahasa kanan ke kiri.

Bagaimanakah harta penyaringan teks mempengaruhi susun atur teks dalam pelbagai elemen HTML?

Harta text-align mempengaruhi susun atur teks dalam unsur-unsur HTML peringkat blok dengan menyesuaikan kedudukan mendatar garis teks berbanding dengan tepi kotak kandungan elemen. Contohnya:

• Apabila digunakan untuk elemen <p></p> dengan text-align: left , teks akan menyelaraskan sepanjang pinggir kiri perenggan, meninggalkan sebelah kanan yang berpotensi tidak sekata.
• Jika text-align: right digunakan, teks akan menyelaraskan di sepanjang tepi kanan, meninggalkan sebelah kiri yang berpotensi tidak sekata.
• Menggunakan text-align: center akan meletakkan teks supaya terdapat jumlah ruang yang sama di kedua-dua sisi kiri dan kanan blok teks dalam elemen.
• Apabila text-align: justify ditetapkan, penyemak imbas cuba menyesuaikan jarak antara kata-kata supaya setiap baris teks dalam elemen terbentang untuk mengisi lebar penuh elemen, kecuali untuk baris terakhir, yang biasanya ditinggalkan secara lalai.

Impak text-align adalah terhad kepada teks dan elemen sebaris dalam elemen peringkat blok yang digunakan. Ia tidak menjejaskan kedudukan unsur-unsur peringkat blok sendiri atau unsur-unsur yang benar-benar diposisikan dalam blok.

Bolehkah harta penyaringan teks digunakan untuk menyelaraskan teks dalam kedua-dua arah mendatar dan menegak?

Harta text-align direka khusus untuk mengawal penjajaran teks mendatar dalam elemen. Ia tidak mempunyai kesan ke atas penjajaran menegak teks. Untuk penjajaran menegak, sifat CSS lain mesti digunakan.

Untuk mencapai penjajaran menegak teks, anda mungkin menggunakan sifat-sifat seperti line-height untuk elemen teks tunggal, atau sifat flexbox seperti align-items dan justify-content apabila menggunakan bekas Flex. Sebagai contoh, untuk memusatkan teks secara menegak dalam <div> menggunakan flexbox, anda boleh menggunakan:<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;code class=&quot;css&quot;&gt;div { display: flex; align-items: center; justify-content: center; height: 200px; /* Height must be set for vertical alignment to work */ }&lt;/code&gt;</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p> Kesimpulannya, sementara <code>text-align berkuasa untuk menguruskan susun atur teks mendatar, teknik CSS lain diperlukan untuk penjajaran menegak.