Bagaimana untuk memusatkan kotak teks dalam HTML

Cara untuk memusatkan kotak teks HTML, anda memerlukan contoh kod khusus

Dalam reka bentuk web, elemen penjajaran tengah ialah keperluan reka letak yang biasa. Untuk kotak teks HTML, terdapat beberapa cara untuk menjadikannya kelihatan berpusat. Berikut akan memperkenalkan anda kepada kaedah pemusatan yang biasa digunakan secara terperinci, dan melampirkan contoh kod tertentu.

Kaedah 1: Gunakan atribut pemusatan dalam helaian gaya CSS

Untuk mencapai paparan berpusat kotak teks, anda boleh menggunakan atribut penjajaran teks dalam helaian gaya CSS. Hanya tetapkan elemen bekas induk di mana kotak teks terletak kepada penjajaran tengah.

Mula-mula, tentukan gaya CSS dalam kepala dokumen HTML atau dalam helaian gaya luaran. Contohnya adalah seperti berikut:

<style>
    .container {
        text-align: center;
    }
</style>

Seterusnya, dalam bahagian badan dokumen HTML, letakkan kotak teks yang perlu dipusatkan dalam elemen bekas. Kod sampel adalah seperti berikut:

<div class="container">
    <input type="text" name="textbox" />
</div>

Dalam contoh di atas, kotak teks diletakkan di dalam elemen div dan nama kelas div ditetapkan kepada "bekas". Dalam gaya CSS yang sepadan dengan nama kelas, atribut penjajaran teks ditetapkan ke tengah, iaitu penjajaran berpusat.

Dengan cara ini, kotak teks akan dipaparkan secara mendatar dan berpusat di dalam bekas induk.

Kaedah 2: Gunakan atribut margin dalam helaian gaya CSS

Satu lagi kaedah pemusatan yang biasa digunakan ialah menambah jidar pada kotak teks. Dengan menetapkan margin kiri dan kanan kepada "auto", kotak teks boleh dipusatkan secara automatik secara mendatar.

Kod sampel adalah seperti berikut:

<style>
    .container {
        width: 300px; /* 设置容器的宽度 */
    }

    .textbox {
        margin-left: auto;
        margin-right: auto;
    }
</style>

Dalam contoh di atas, lebar pertama kali ditetapkan dalam gaya CSS bekas. Kemudian, tetapkan jidar-kiri dan jidar-kanan kepada auto dalam gaya CSS kotak teks, yang bermaksud bahawa jidar kiri dan kanan diperuntukkan secara automatik, supaya kotak teks dipaparkan secara mendatar dan berpusat di dalam bekas.

Seterusnya, dalam bahagian badan dokumen HTML, letakkan kotak teks dalam set elemen bekas dengan bekas nama kelas. Kod sampel adalah seperti berikut:

<div class="container">
    <input type="text" name="textbox" class="textbox" />
</div>

Dengan menambahkan gaya CSS dengan nama kelas "kotak teks" pada kotak teks, kotak teks boleh dipusatkan secara automatik.

Di atas ialah dua kaedah biasa dan mudah serta praktikal untuk memusatkan kotak teks HTML. Bergantung pada situasi sebenar, pilih salah satu daripadanya atau gunakannya dalam kombinasi untuk mencapai kesan pemusatan kotak teks.

Sila ambil perhatian bahawa kod dalam contoh di atas adalah untuk rujukan sahaja dan boleh diubah suai dan diselaraskan mengikut keperluan khusus anda semasa penggunaan sebenar.

Atas ialah kandungan terperinci Bagaimana untuk memusatkan kotak teks dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!