Rumah > hujung hadapan web > html tutorial > Bagaimana untuk memusatkan kotak teks dalam HTML

Bagaimana untuk memusatkan kotak teks dalam HTML

王林
Lepaskan: 2024-02-19 23:01:06
asal
1252 orang telah melayarinya

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan