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
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 tegdi dalam elemen peringkat blok, seperti
Contoh:
Dalam contoh ini, teks (tempat letak) di dalam kotak teks akan dipusatkan berbanding dengan elemen
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:
Dalam contoh ini, elemen
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:
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):
Dalam contoh ini, dengan menetapkan jidar kiri dan kanan kepada auto, dan menetapkan lebar
Contoh (menggunakan kedudukan):
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!
![Kursus bahagian hadapan yang paling memahami anda: HTML5/CSS3/ES6/NPM/Vue/...[Asal]](https://img.php.cn/upload/course/000/000/068/632ae26b9b376240.png)
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
