Penjajaran adalah kunci untuk menentukan di mana elemen seperti teks dan imej, butang dan kotak kandungan harus diletakkan. Komponen utama reka bentuk responsif ialah susunan item di tapak web anda. Ini kerana apabila tapak web dibuka daripada peranti dengan saiz skrin yang lebih kecil, seperti telefon pintar, reka letak dan struktur tapak web akan menyesuaikan diri dengan apa yang telah anda rancangkan terlebih dahulu.

Walau bagaimanapun, perubahan ini akan memberi kesan pada jarak antara dan dalam item, serta cara ia diselaraskan dan diletakkan. Anda mungkin mendapati bahawa anda tidak boleh mengklik atau mengisi butang atau borang, atau separuh teks hilang dari skrin jika ia tidak diselaraskan dengan betul.

Dalam artikel ini, kita akan membincangkan cara menjajarkan imej secara menegak dalam elemen berpecah. Apabila foto dijajarkan secara menegak, ia disusun ke dalam lajur. Ini dipanggil penjajaran menegak imej. Imej boleh dijajarkan secara menegak dengan mana-mana teks atau imej lain sendiri. Ini boleh dicapai dengan menggunakan beberapa sifat CSS seperti grid CSS, CSS flexbox, vertical-align, dll.

Gunakan sifat jajar menegak CSS

Menjajarkan menegak– Gunakan sifat CSS ini untuk menetapkan penjajaran menegak elemen.

Tatabahasa

element{ vertical-align: values; }

boleh melalui cara berikut -

• Panjang - Angkat elemen ke atas atau ke bawah mengikut panjang yang ditentukan

• %- Menaikkan atau menurunkan elemen

• Atas, tengah, bawah, garis dasar, dsb.,

• Awal

• Inherent

Contoh

Di sini kami menggunakan atributvertical-alignuntuk menjajarkan imej secara menegak dengan teks.

     
  
 Vertical Alignment 
 
  Welcome to Tutorialspoint  
  

Menggunakan CSS Flexbox

Anda boleh menggunakan CSS flexbox dan CSS Grid untuk menjajarkan satu siri elemen secara menegak.

CSS Flexbox ialah bekas yang mengandungi banyak elemen Flex. Elemen fleksibel boleh disusun dalam baris atau lajur seperti yang dikehendaki. Bekas Flex ialah elemen induk, dan item Flex ialah anak mereka.

display:flexmembolehkan pembangun menggayakan setiap komponen supaya ia kelihatan sesuai dan menarik. Ia menyusun elemen anak unsur dalam baris atau lajur.

Bekas fleksibel mempunyai pelbagai sifat. Mereka disebut di bawah -

• Flex-direction– Digunakan untuk menunjukkan arah di mana bekas menyusun komponen Flex. Nilai – Lajur, Lajur Songsang, Baris, Baris Songsang

• Flex-wrap– Digunakan untuk menentukan atau menentukan sama ada projek Flex memerlukan pembalut. Nilai – baris baharu, baris baharu sekarang

• Flex-flow– Ia membolehkan pembangun menentukan kedua-dua arah flex dan flexwrap. Nilai – balut baris, balut lajur, dsb.,

• Sejajarkan-item– Keupayaan untuk menentukan penjajaran item flex

• Nilai– tengah, mula lentur, hujung lentur, ruang sekeliling, dsb.,

• Flex-basis– Digunakan untuk menentukan dimensi item flex.

• Nilai- boleh panjang (cm, px, em) atau peratusan.

• Justify-content- Ia juga digunakan untuk penjajaran item flex.

• Nilai– pusat, mula lentur, hujung lentur, ruang sekeliling, dsb.,

• Flex-shrink– Menerima nombor sebagai nilai. Jika item mempunyai nilai 3, ia mengecut tiga kali ganda berbanding jika ia mempunyai nilai 1.

• Pesan- Ia menentukan susunan penjajaran elemen Flex.

Contoh

     
  
 Vertical alignment of images using CSS flexbox 
 
    
  

Gunakan Grid CSS

Lebih mudah untuk membina halaman web tanpa menggunakan apungan dan kedudukan berkat ciri Grid CSS, yang membolehkan pembangun membina sistem susun atur baris dan lajur berasaskan grid. Bekas grid ialah elemen induk.Paparan: griddigunakan untuk mencipta elemen sebagai grid.

Sesetengah sifat grid CSS adalah seperti berikut -

• Grid-template-columns– digunakan untuk membuat lajur. Nilai ini dinyatakan sebagai panjang, %, dsb.,

• Grid-template-rows– digunakan untuk mencipta baris. Nilai dinyatakan dalam bentuk panjang, %, dsb.,

• Grid-gap– Ia adalah sifat trengkas untuk jurang lajur dan jurang baris.

Contoh

     
  
 Vertical alignment of images using CSS Grid 
 
    
 

Kesimpulan

Dalam artikel ini, kami membincangkan cara berbeza untuk menjajarkan imej secara menegak dalam bahagian yang menjangkau seluruh halaman web.

Atas ialah kandungan terperinci Bagaimana untuk menjajarkan imej secara menegak dalam bahagian yang menjangkau seluruh halaman web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!