Teks boleh ditambah dengan mudah di mana-mana sahaja, tetapi tanpa penjajaran, ia mungkin kelihatan tidak dapat dipersembahkan dan kurang menarik. Teks tidak sejajar juga boleh mengganggu keseluruhan rupa halaman web. Untuk menangani perkara sedemikian dalam aplikasi web, kami boleh menggunakan beberapa sifat berguna CSS yang akan membantu anda menjajarkan teks dalam masa yang singkat.
Artikel ini akan menunjukkan cara menjajarkan teks secara menegak dalam CSS.
Bagaimana untuk Menjajarkan Teks Secara Menegak dalam CSS?
Dalam CSS, anda boleh menggunakan sifat di bawah untuk menjajarkan teks secara menegak:
-
- sifat ketinggian garis
- memaparkan dan menjajarkan sifat item
Sekarang, mari kita semak setiap kaedah satu demi satu!
Kaedah 1: Menggunakan Harta ketinggian garis untuk Menjajarkan Teks Secara Menegak dalam CSS
' ketinggian garisan harta ” menentukan kawasan di bawah dan elemen sebaris ke atas. Ia menetapkan jarak teks daripada item lain. Menggunakan sifat garis-tinggi, teks boleh dengan mudah dijajarkan secara menegak ke tengah.
Contoh
Berikut ialah teks di dalam kotak (sempadan) yang kini terletak di bahagian atas sebelah kiri. Mari selaraskan teks ini ke tengah secara menegak dan mendatar:
Sekarang mari kita beralih ke kaedah seterusnya. “ Flexbox ” ialah reka letak satu dimensi yang membolehkan anda memformat HTML. Anda juga boleh menggunakannya untuk menjajarkan item secara menegak atau mendatar. Jadi, mari kita ambil contoh dan selaraskan teks secara menegak dengan bantuan kotak fleksibel. Contoh Pertama sekali, kami akan menjadikan bekas kami fleksibel dengan menetapkan nilai ' paparan ” harta sebagai “ lentur ”. Seterusnya, gunakan ' align-item ” harta untuk menetapkan kandungan di tengah secara menegak. Selain itu, untuk menyelaraskan kandungan di tengah secara mendatar, ' justify-content ” harta akan digunakan: Dalam CSS, teks boleh diselaraskan secara menegak dengan mudah dengan bantuan ' ketinggian garisan ” harta. Anda juga boleh menggunakan ' kotak lentur ' untuk penjajaran menegak teks dengan ' paparan ” dan “ align-item ” hartanah. Flexbox ialah susun atur satu dimensi dan hanya digunakan untuk penjajaran menegak atau mendatar item. Siaran ini menawarkan dua kaedah paling mudah yang boleh membantu anda menjajarkan teks secara menegak dalam CSS.
Untuk berbuat demikian, tambahkan bekas “
Laman Web Pendidikan Terbaik !
div >
Kotak itu dibentuk menggunakan ' 3px 'sempadan dan' 250px “ ketinggian. ' Saiz huruf ' harta digunakan dengan nilai ' 24px ” untuk menjadikan fon kelihatan. Kami akan menetapkan div ' ketinggian garisan 'daripada' 250px ” untuk menjajarkan teksnya secara menegak di tengah. Seterusnya, kami akan menggunakan ' penjajaran teks ” harta untuk menjajarkan teks di tengah:
ketinggian garis: 250px;
text-align: tengah;
saiz fon: 24px;
ketinggian: 250px;
sempadan: 3px pepejal;
}
Seperti yang anda lihat, teks telah dijajarkan secara menegak ke tengah menggunakan ketinggian garis dan mendatar ke tengah dengan sifat penjajaran teks. Kaedah 2: Menggunakan Harta paparan dan jajar-item untuk Menjajarkan Teks Secara Menegak dalam CSS
paparan: lentur ;
align-item: tengah;
justify-content: pusat;
saiz fon: 24px;
ketinggian: 200px;
sempadan: 3px pepejal;
}
Teks yang ditentukan telah berjaya dijajarkan ke tengah:
Kami telah menyediakan kaedah yang berkaitan dengan menjajarkan teks secara menegak dalam CSS. Kesimpulan