Bagaimana untuk menyelaraskan kotak teks dalam html

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

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 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>

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>

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>

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>

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>

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!