Penjelasan terperinci tentang sifat penjajaran teks CSS: penjajaran teks dan kandungan justify

Penjelasan terperinci tentang sifat penjajaran teks CSS: penjajaran teks dan justify-kandungan

Dalam reka bentuk web, penjajaran teks merupakan bahagian yang sangat penting. Penjajaran teks yang baik boleh meningkatkan keindahan keseluruhan dan kebolehbacaan halaman. Dalam CSS, terdapat dua sifat penjajaran teks yang biasa digunakan, iaitu text-align dan justify-content.

1. text-align

Atribut penjajaran teks digunakan untuk menetapkan penjajaran mendatar teks. Ia boleh digunakan pada kedua-dua elemen peringkat blok dan elemen sebaris.

Nilai yang boleh digunakan ialah:

1. kiri: dijajar ke kiri, nilai lalai.
2. kanan: Jajar ke kanan.
3. tengah: Penjajaran tengah.
4. justify: Justify, teks dalam baris akan diregangkan untuk mengisi keseluruhan lebar baris.

Contoh:

<style>
    p {
        text-align: center;
    }
    h1, h2 {
        text-align: right;
    }
</style>

<h1>这是一个标题</h1>
<h2>这是一个副标题</h2>
<p>这是一段居中对齐的文本。</p>

Dalam kod di atas, teks elemen tajuk h1 dan h2 akan dijajarkan ke kanan, manakala teks dalam elemen p akan dijajarkan ke tengah.

2. justify-content

Atribut justify-content digunakan untuk menetapkan penjajaran teks berbilang baris. Ia hanya boleh digunakan pada elemen peringkat blok dan hanya berkesan untuk elemen dengan berbilang baris teks.

Nilai yang boleh digunakan ialah:

1. flex-start: Nilai lalai, penjajaran permulaan.
2. flex-end: Jajar di hujung.
3. tengah: Penjajaran tengah.
4. ruang-antara: Jajarkan kedua-dua hujung, teks dalam baris akan diedarkan sama rata dalam baris, baris pertama akan dijajarkan di bahagian atas dan baris terakhir akan dijajarkan di bahagian bawah.
5. ruang-sekitar: Dijajarkan sama rata, teks dalam baris akan diedarkan sama rata dalam baris, dengan ruang yang sama di atas dan di bawah setiap baris.

Contoh:

<style>
    .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .item {
        width: 100px;
    }
</style>

<div class="container">
    <div class="item">项目 1</div>
    <div class="item">项目 2</div>
    <div class="item">项目 3</div>
    <div class="item">项目 4</div>
    <div class="item">项目 5</div>
    <div class="item">项目 6</div>
</div>

Dalam kod di atas, bekas .bekas menggunakan reka letak fleksibel dan menetapkan atribut justify-content kepada ruang-antara, supaya setiap elemen .item akan diagihkan sama rata dalam bekas, di atas dan di bawah baris terakhir Ruang akan sama dengan baris lain.

Ringkasnya, atribut penjajaran teks digunakan untuk menetapkan penjajaran mendatar bagi satu baris teks, manakala atribut justify-content digunakan untuk menetapkan penjajaran teks berbilang baris. Mereka boleh menjadikan teks pada halaman disusun dengan lebih kemas dan meningkatkan kebolehbacaan dan estetika halaman. Dalam penggunaan sebenar, anda boleh memilih penjajaran yang sesuai mengikut keperluan dan melaraskan gaya untuk mencapai kesan terbaik.

Atas ialah kandungan terperinci Penjelasan terperinci tentang sifat penjajaran teks CSS: penjajaran teks dan kandungan justify. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!