Bagaimana untuk menetapkan kedua-dua hujung untuk diselaraskan dalam css? Analisis ringkas pelbagai kaedah

Dalam reka letak tapak web, penjajaran teks adalah bahagian yang sangat penting. Kami biasanya menggunakan penjajaran kiri, tengah dan kanan. Walau bagaimanapun, dalam beberapa kes, kita perlu menggunakan justified, juga dipanggil "justified". Mewajarkan mengedarkan teks secara sama rata dan meningkatkan kesan visual. Walaupun wajar menjadi semakin kurang biasa dalam reka bentuk web moden, ia masih merupakan teknik yang sangat berguna apabila anda memerlukannya.

Terdapat banyak cara untuk mencapai penjajaran pada kedua-dua hujung. Dalam artikel ini, kami akan membincangkan beberapa teknik yang paling biasa, daripada CSS asas kepada beberapa teknik lanjutan.

Teknik CSS Asas

Teknik CSS Asas adalah yang paling mudah, tetapi kadangkala cara terbaik untuk mencapai penjajaran. Kita boleh menggunakan atribut penjajaran teks untuk menetapkan teks untuk mewajarkan, seperti yang ditunjukkan di bawah:

p {
  text-align: justify;
}

Peraturan CSS mudah ini akan menjajarkan teks perenggan pada kedua-dua hujungnya. Ini boleh menghasilkan hasil yang sangat baik dalam sesetengah situasi, tetapi mungkin tidak begitu hebat dalam situasi lain. Ini kerana apabila CSS dibenarkan, setiap baris teks memenuhi keseluruhan lebar, menyebabkan jarak tidak sekata. Ini mungkin tidak kelihatan cantik, tetapi terdapat beberapa cara kita boleh membetulkannya. Cara mudah untuk melakukannya ialah dengan meningkatkan kerning, melalui sifat jarak huruf:

p {
  text-align: justify;
  letter-spacing: 2px;
}

Ini akan menambah 2 piksel ruang antara teks perenggan. Walaupun ini mungkin menyebabkan beberapa perkataan dipecahkan kepada beberapa perkataan dan pemisah baris di tempat yang tidak sesuai. Walau bagaimanapun, jika teks anda terutamanya dalam bahasa Inggeris, ini tidak menjadi masalah. Walau bagaimanapun, jika teks anda dalam bahasa Cina, anda mungkin mahu meningkatkan kerning antara bahasa Cina dan Inggeris.

Untuk mengelakkan perkataan dipecahkan, kita boleh menggunakan sifat CSS lain: text-justify. text-justify ialah sebahagian daripada CSS3 yang mengawal cara baris teks diselaraskan. Tiga nilai tersedia untuk atribut ini: auto, tiada dan antara perkataan. auto ialah nilai lalai dan baris diselaraskan dengan jenis kiri, kanan dan tengah. Antara perkataan menggunakan jarak antara perkataan dan jarak antara perkataan untuk mencapai penjajaran pada kedua-dua hujungnya. Sudah tentu, anda mungkin melihat beberapa aksara ruang kosong yang tidak teratur, terutamanya di tengah-tengah perkataan. Ini biasanya disebabkan oleh perbezaan antara pelbagai bahasa.

Satu lagi helah untuk mengekalkan kata-kata yang utuh ialah menggunakan balutan perkataan. Ini akan menyebabkan perkataan yang panjang akan dipecahkan di tempat yang sesuai dan mengelakkan perpecahan perkataan. Anda boleh menggunakan peraturan gaya berikut:

p {
   text-align: justify;
   word-break: break-all;
}

Ini akan memecahkan perkataan di mana-mana dan menjajarkan teks dalam jidar. Ia lebih kompleks daripada sifat jarak huruf, tetapi untuk senario di mana teks bahasa Inggeris perlu diselaraskan, ini adalah pilihan untuk dipertimbangkan.

Petua CSS Terperinci

Petua CSS di atas berfungsi dengan baik untuk projek web mudah. Walau bagaimanapun, jika anda ingin menyebarkan teks secara merata tanpa memecahkan perkataan atau pemformatan teks, anda mungkin memerlukan beberapa teknik lanjutan.

Agihkan sama rata elemen kanak-kanak dalam bekas dengan menggunakan Flexbox

Reka letak Flexbox ialah sistem susun atur CSS baharu yang memberi anda kawalan dan reka letak tapak web anda dengan lebih baik. Kita boleh menggunakan fungsi Flexbox pelayar moden untuk mencapai penjajaran pada kedua-dua hujungnya. Untuk menggunakan reka letak Flexbox, kita perlu menetapkan display:flex pada bekas.

.container {
  display: flex;
  justify-content: space-between;
}

Peraturan gaya ini akan mengagihkan semua elemen dalam bekas secara sama rata sambil mengekalkan formatnya sendiri. Nilai ruang antara memastikan ruang putih yang sesuai antara elemen kanak-kanak dalam bekas, dengan itu mencapai penjajaran. Pendekatan ini juga mempunyai kelebihan untuk menyesuaikan diri dengan saiz skrin yang berbeza melalui reka bentuk responsif.

Gunakan Grid CSS untuk mengagihkan elemen anak secara sama rata dalam bekas

Grid CSS ialah satu lagi sistem susun atur CSS moden yang lebih fleksibel dan berkuasa daripada Flexbox. Kita boleh menggunakan Grid untuk mencapai penjajaran pada kedua-dua hujung:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  justify-items: stretch;
  align-items: center;
}

Peraturan ini melakukan banyak perkara. Pertama, ia menjadikan bekas sebagai grid dan menetapkan bilangan lajur untuk grid berulang dan lebar minimum dan maksimum setiap lajur. Seterusnya, ia mentakrifkan spacer untuk memisahkan elemen kanak-kanak. Akhir sekali, ia menetapkan sifat justify-item untuk mengagihkan elemen anak secara sama rata, dan harta align-item untuk memusatkan semua elemen anak secara menegak dalam bekas. Kaedah ini memerlukan kemahiran CSS profesional, tetapi hasilnya sangat berkesan.

Kesimpulan

Walaupun wajar bukanlah elemen yang sangat diperlukan dalam setiap reka bentuk laman web, ia adalah teknik yang sangat berguna yang boleh meningkatkan kesan visual. Daripada asas menggunakan sifat penjajaran teks kepada lanjutan menggunakan reka letak Flexbox dan Grid, kami meneroka teknik yang berbeza dalam artikel ini untuk mencapai penjajaran. Tidak kira apa yang diperlukan oleh tapak web anda, petua ini boleh membantu meningkatkan kebolehbacaan dan estetika tapak web anda.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan kedua-dua hujung untuk diselaraskan dalam css? Analisis ringkas pelbagai kaedah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!