Artikel ini mengambil pandangan yang mendalam tentang bagaimana untuk berpusat secara mendatar kandungan dalam talian (seperti teks atau ` elemen) dalam unsur-unsur peringkat blok dalam CSS. Dengan menganalisis senario aplikasi yang betul dari `Text-Align: Center;` Atribut dan menggabungkannya dengan contoh kod sebenar, artikel ini bertujuan untuk membantu pemaju menguasai kemahiran susun atur asas dan utama ini, mengelakkan kesalahpahaman yang sama, dan membina susun atur laman web dengan struktur yang jelas dan respons yang baik.

Fahami bagaimana teks-selari: pusat; berfungsi

Dalam susun atur CSS, elemen berpusat secara mendatar adalah keperluan yang sama. Walau bagaimanapun, kaedah untuk mencapai pusat berbeza untuk pelbagai jenis elemen (tahap blok, inline, inline-block). Teks-Align: Pusat; adalah harta yang sering disalahpahami. Ia terutamanya digunakan untuk menyelaraskan kandungan selaras di dalam elemen peringkat blok (termasuk teks, , , dan unsur-unsur inline lain, serta unsur-unsur yang ditetapkan untuk dipaparkan: blok inline;). Ia tidak langsung memusatkan elemen peringkat blok sendiri.

Apabila elemen diletakkan di dalam elemen P (perenggan), dianggap sebagai kandungan sebaris elemen P. Oleh itu, untuk menjadikan elemen secara mendatar berpusat di dalam elemen P, pendekatan yang betul adalah untuk memohon teks-selari: pusat; atribut kepada elemen tahap blok induknya, elemen p.

Soalan dan penyelesaian yang sering ditanya

Pertimbangkan struktur HTML berikut, yang mengandungi elemen yang mewakili butang "Beli":

 <p class="new">
    Baru
</p>
<p class="mac">
    MacBook Pro
</p>
<p class="pro">
    Supercharged untuk kebaikan.
</p>
<p class="f">
   Dari $ 1999 
</p>
<p>
   <span class="beli"> beli </span>
</p>

Dan gaya CSS yang sepadan:

 .buy {
    latar belakang warna: RGB (73, 73, 247);
    Font-Weight: Bold;
    Padding: 7px 15px; / * Penulisan padding mudah */
    Warna: Putih;
    Radius sempadan: 30px;
    /* Teks-Align: Pusat; // tetapan di sini tidak sah kerana rentang adalah elemen inline*/
}

/ * Gaya lain ... */
.f {
    Teks-Align: Pusat;
    margin-top: 0;
    margin-bottom: 0;
}
/ * ... */

Dalam senario ini, jika anda terus cuba menambah Teks-Align: pusat; Dalam kelas .buy, atau tambahkannya kepada elemen ibu ibu bapa yang tidak berkaitan seperti .f, anda tidak akan dapat memusatkan teks "beli". Ini kerana elemen adalah elemen inline secara lalai, Text-Align tidak mempunyai kesan pada dirinya sendiri, dan .f bukanlah induk langsung dari "beli" .

Penyelesaian yang betul adalah untuk menambah kelas ke elemen p yang mengandungi dan memohon teks-selat: pusat; kepada elemen ibu induk ini.

HTML diubahsuai:

 <p class="new">
    Baru
</p>
<p class="mac">
    MacBook Pro
</p>
<p class="pro">
    Supercharged untuk kebaikan.
</p>
<p class="f">
   Dari $ 1999 
</p>
<p class="Buy-Wrapper"> 
   <span class="beli"> beli </span>
</p>

CSS diubahsuai:

 / * Pastikan gaya .buy tidak berubah, ia mentakrifkan penampilan butang */
.buy {
    latar belakang warna: RGB (73, 73, 247);
    Font-Weight: Bold;
    Padding: 7px 15px;
    Warna: Putih;
    Radius sempadan: 30px;
    paparan: blok sebaris; /* Pilihan: Jika anda memerlukan span untuk mempunyai sifat peringkat blok seperti lebar/ketinggian, tetapi masih berpusat sebagai kandungan sebaris*/
}

/ * Tambahkan gaya berpusat ke elemen P yang mengandungi butang "Beli" */
.buy-wrapper {
    Teks-Align: Pusat; /* Kunci: Pusat kandungan inline dalam elemen tahap blok induk*/
    margin-top: 15px; /* Tambah jarak yang diperlukan*/
}

/ * Gaya lain ... */
.f {
    Teks-Align: Pusat;
    margin-top: 0;
    margin-bottom: 0;
}
/ * ... */

Dengan menggunakan Text-Align: Center; Kepada kelas .buy-wrapper, (dan mana-mana kandungan sebaris lain) dalam elemen P akan berpusat secara mendatar.

Kod sampel lengkap

Untuk menunjukkannya dengan lebih jelas, inilah contoh HTML dan CSS yang lengkap yang menunjukkan cara memusatkan butang "Beli" secara mendatar:

 


    <meta charset="utf-8">
    <meta name="viewport" content="width = peranti-lebar, skala awal = 1.0">
    <tirly> HTML/CSS Element Centering Tutorial 
    <yaya>
        badan {
            font-family: arial, sans-serif;
            Margin: 20px;
            latar belakang warna: #F4F4F4;
            Warna: #333;
            Teks-Align: Pusat; /* Contoh: Pusat semua teks dalam badan, tetapi tidak mempunyai kesan pada unsur-unsur peringkat blok sendiri*/
        }

        .new {
            Font-Weight: Bold;
            Warna: orang yang diberi oren;
            margin-bottom: 0;
        }
        .mac {
            Font-Weight: Bold;
            saiz font: 25px;
            margin-top: 5px;
            margin-bottom: 0;
        }
        .pros {
            Font-Weight: Bold;
            saiz font: 42px;
            margin-top: 3px;
            margin-bottom: 15px;
        }
        .f {
            margin-top: 0;
            margin-bottom: 0;
        }

        /* Gaya berpusat teras*/
        .buy-wrapper {
            Teks-Align: Pusat; / * Pusat kandungan inline dalamannya (termasuk .buy span) */
            margin-top: 20px; / * Tambahkan beberapa jarak teratas */
        }

        .buy {
            latar belakang warna: RGB (73, 73, 247);
            Font-Weight: Bold;
            Padding: 7px 15px;
            Warna: Putih;
            Radius sempadan: 30px;
            paparan: blok sebaris; / * Jadikannya berkelakuan seperti butang, anda boleh menetapkan padding, dll. */
            Teks-penyerapan: Tiada; /* Jika ia adalah tag, keluarkan garis bawah*/
        }

        / * Contoh: Unsur tahap blok berpusat pada dirinya sendiri, dan lebar dan margin perlu ditetapkan: auto */
        .container {
            lebar: 80%;
            Margin: 30px Auto; /* Unsur peringkat blok berpusat pada diri mereka*/
            latar belakang warna: #fff;
            Padding: 20px;
            Radius sempadan: 8px;
            Box-shadow: 0 2px 4px RGBA (0,0,0,0.1);
        }
    


    <div class="container">
        <p class="new">
            Baru
        </p>
        <p class="mac">
            MacBook Pro
        </p>
        <p class="pro">
            Supercharged untuk kebaikan.
        </p>
        <p class="f">
           Dari $ 1999 
        </p>
        <p class="buy-wrapper">
           <span class="beli"> beli </span>
        </p>
    </div>

</yaya></tirly>

Nota dan ringkasan

1. Teks-Align apa: Pusat; Adakah: Sentiasa ingat bahawa Teks-Align: Pusat; digunakan untuk elemen induk peringkat blok untuk memusatkan kandungan inline (teks, , , , atau paparan: blok inline; elemen) di dalamnya.
2. Pusat elemen peringkat blok sendiri: Jika anda ingin memusatkan elemen peringkat blok dengan lebar tetap, anda harus menggunakan margin: 0 auto; (Pendek untuk margin-kiri: auto; margin-kanan: auto;).
3. Flexbox dan Grid: Untuk keperluan susun atur yang lebih kompleks, Flexbox (kotak fleksibel) dan grid CSS (susun atur grid) menyediakan penyelesaian yang lebih kuat dan fleksibel. Sebagai contoh, menggunakan Flexbox, anda boleh menetapkan elemen induk untuk memaparkan: Flex; Justify-Content: Center; Align-item: pusat; untuk mencapai pusat mendatar dan menegak elemen kanak -kanak.
4. HTML Semantik: Dalam contoh ini, jika "Beli" adalah butang yang boleh diklik, lebih disyorkan untuk menggunakan elemen atau elemen dengan role = "butang" dan bukannya tulen.
5. Elakkan gaya berlebihan: pastikan teks-selat: pusat; hanya digunakan untuk elemen induk yang perlu dipusatkan, bukan semua elemen, untuk mengelakkan gaya yang tidak perlu dan masalah susun atur yang berpotensi.

Menguasai penggunaan Teks-Align: Pusat yang betul; adalah asas susun atur CSS. Dengan memahami mekanisme tindakannya, anda dapat menyelesaikan masalah yang berpusat pada kandungan yang berpusat dan meletakkan asas yang kukuh untuk membina laman web yang responsif dan indah.

Atas ialah kandungan terperinci Garis panduan untuk susun atur berpusatkan kandungan sebaris dalam elemen peringkat blok dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!