Rumah >hujung hadapan web >tutorial css >Bagaimanakah anda mengawal penjajaran teks menggunakan harta Teks-Align?
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.
Harta text-align
menerima beberapa nilai yang menentukan bagaimana teks dalam elemen diselaraskan. Nilai yang paling biasa digunakan ialah:
Di samping itu, harta benda text-align
juga menerima nilai-nilai yang kurang biasa berikut:
left
untuk bahasa kiri-ke-kanan dan right
untuk bahasa kanan ke kiri.right
untuk bahasa kiri-ke-kanan dan left
untuk bahasa kanan ke kiri. 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:
<p></p>
dengan text-align: left
, teks akan menyelaraskan sepanjang pinggir kiri perenggan, meninggalkan sebelah kanan yang berpotensi tidak sekata.text-align: right
digunakan, teks akan menyelaraskan di sepanjang tepi kanan, meninggalkan sebelah kiri yang berpotensi tidak sekata.text-align: center
akan meletakkan teks supaya terdapat jumlah ruang yang sama di kedua-dua sisi kiri dan kanan blok teks dalam elemen.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.
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:<pre class="brush:php;toolbar:false"> <code class="css">div { display: flex; align-items: center; justify-content: center; height: 200px; /* Height must be set for vertical alignment to work */ }</code></pre>
<p> Kesimpulannya, sementara <code>text-align
berkuasa untuk menguruskan susun atur teks mendatar, teknik CSS lain diperlukan untuk penjajaran menegak.
Atas ialah kandungan terperinci Bagaimanakah anda mengawal penjajaran teks menggunakan harta Teks-Align?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!