Bagaimana untuk menyelaraskan kotak teks dalam html_Cara untuk menyelaraskan kotak teks dalam html-html tutorial-php.cn

Cara menjajarkan kotak teks dalam HTML: 1. Penjajaran teks; 2. Gunakan susun atur Flexbox untuk menjajarkan;

Bagaimana untuk menyelaraskan kotak teks dalam html

Dalam HTML, penjajaran kotak teks biasanya melibatkan elemen sebaris (seperti kotak teks yang dicipta oleh tag ) atau elemen peringkat blok (seperti elemen kontena seperti

atau < borang> Tetapan gaya kotak teks dalam). HTML sendiri tidak menyediakan sifat penjajaran langsung, tetapi kami boleh menggunakan CSS (Cascading Style Sheets) untuk mencapai pelbagai kesan penjajaran.

Berikut ialah beberapa kaedah biasa untuk menjajarkan kotak teks dalam HTML menggunakan CSS:

1 Penjajaran teks (elemen sebaris)

Untuk elemen sebaris (seperti ), kami biasanya menumpukan pada penjajaran itu. kandungan teks, bukan penjajaran elemen itu sendiri. Ini boleh dicapai dengan menetapkan sifat penjajaran teks. Walau bagaimanapun, sila ambil perhatian bahawa penjajaran teks hanya berfungsi untuk kandungan teks di dalam elemen peringkat blok, jadi anda perlu meletakkan teg di dalam elemen peringkat blok, seperti

Contoh:

<div style="text-align: center;">  
  <input type="text" placeholder="居中对齐的文本框">  
</div>

Salin selepas log masuk

Dalam contoh ini, teks (tempat letak) di dalam kotak teks akan dipusatkan berbanding dengan elemen

Walau bagaimanapun, sila ambil perhatian bahawa pendekatan ini tidak mengubah kedudukan reka letak itu sendiri pada halaman, ia hanya mempengaruhi penjajaran teks dalam.

2. Gunakan penjajaran susun atur Flexbox

Flexbox ialah model reka letak moden yang sesuai untuk menjajarkan elemen, termasuk elemen sebaris dan elemen peringkat blok. Anda boleh mencapai penjajaran dengan menetapkan paparan: flex; dan sifat penjajaran yang sepadan (seperti justify-content dan align-item) pada elemen induk.

Contoh:

<div style="display: flex; justify-content: center; align-items: center; height: 100vh;">  
  <input type="text" placeholder="使用Flexbox居中的文本框">  
</div>

Salin selepas log masuk

Dalam contoh ini, elemen

ditetapkan sebagai bekas fleksibel dan menggunakan justify-content: center dan align-item: center; Berpusat secara menegak. tinggi: 100vh; Pastikan

3. Jajar menggunakan susun atur Grid

CSS Grid ialah satu lagi sistem susun atur berkuasa yang juga boleh digunakan untuk menjajarkan elemen. Sama seperti Flexbox, anda boleh mencapai penjajaran dengan menetapkan paparan: grid dan sifat penjajaran yang sepadan pada elemen induk.

Contoh:

<div style="display: grid; place-items: center;">  
  <input type="text" placeholder="使用Grid居中的文本框">  
</div>

Salin selepas log masuk

Di sini tempat-item: tengah; ialah singkatan untuk justify-item: tengah; dan align-item: tengah;, yang memusatkan elemen kanak-kanak secara mendatar dan menegak dalam bekas grid.

4. Gunakan jidar atau kedudukan untuk penalaan halus

Dalam sesetengah kes, anda mungkin mahu mempunyai kawalan yang lebih terperinci ke atas kedudukan kotak teks. Ini boleh dicapai dengan menggunakan sifat margin untuk melaraskan margin elemen, atau dengan menggunakan sifat kedudukan bersama-sama dengan sifat atas, kanan, bawah dan kiri.

Contoh (menggunakan jidar):

<div style="margin-left: auto; margin-right: auto; width: 50%;">  
  <input type="text" placeholder="使用margin居中的文本框">  
</div>

Salin selepas log masuk

Dalam contoh ini, dengan menetapkan jidar kiri dan kanan kepada auto, dan menetapkan lebar

, anda boleh membuat

di dalamnya) Berpusat secara mendatar.

Contoh (menggunakan kedudukan):

<div style="position: relative; height: 100vh;">  
  <input type="text" placeholder="使用position定位的文本框" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">  
</div>

Salin selepas log masuk

Di sini, elemen induk ditetapkan kepada kedudukan relatif (kedudukan: relatif;), dan kotak teks ditetapkan kepada kedudukan mutlak (kedudukan: mutlak;). Alihkan sudut kiri atas kotak teks ke tengah elemen induk melalui atas: 50% dan kiri: 50%;, kemudian gunakan transform: translate(-50%, -50%) untuk mengalihkan pusatnya sendiri ke titik itu, dengan itu Mencapai kesan pemusatan.

Nota:

Pilihan penjajaran bergantung pada keperluan khusus anda dan konteks reka letak.

Cuba elakkan menggunakan gaya sebaris dan sebaliknya tentukan gaya dalam fail CSS yang berasingan untuk pengurusan dan penggunaan semula yang lebih baik.

Pertimbangkan untuk menggunakan tetapan semula CSS atau normalkan CSS untuk menghapuskan perbezaan gaya lalai antara penyemak imbas.

Apabila menggunakan teknologi reka letak moden seperti Flexbox atau Grid, pastikan penyemak imbas sasaran anda menyokong ciri ini atau sediakan penyelesaian sandaran untuk keserasian dengan penyemak imbas lama.

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

Label berkaitan：

html 文本框 Pusat secara menegak kedudukan mutlak atribut kedudukan susun atur grid kedudukan relatif

sumber：php.cn

Artikel sebelumnya：Bagaimana untuk membaca fail teks dalam html Artikel seterusnya：Bagaimana untuk meninggalkan dua ruang kosong dalam perenggan dalam html

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

Artikel terbaru oleh pengarang