Cara Menegak Memusatkan Elemen div untuk semua Pelayar Menggunakan CSS

Dalam pembangunan web, adalah penting untuk mencipta reka letak elemen dengan betul. Walau bagaimanapun, banyak sifat CSS, seperti CSS3 Flexible Box, berguna untuk melaraskan reka letak halaman web dan elemen HTML. Kotak Fleksibel digunakan untuk mengatur halaman web dan aplikasi secara rekursif. Mod Flexbox ini membantu membuat reka letak untuk halaman web dan aplikasi yang kompleks.

Siaran ini akan membimbing anda tentang cara memusatkan elemen div untuk semua penyemak imbas menggunakan CSS secara menegak.

Bagaimana untuk Menjajarkan Elemen div Menggunakan CSS?

Elemen div boleh dijajarkan secara menegak dengan menggunakan sifat paparan ' lentur ” bersama-sama dengan CSS “ align-item ” harta dan “ justify-content ” harta benda. Sifat 'align-item' menjajarkan elemen secara menegak, dan sifat 'justify-content' menjajarkan kandungan secara mendatar.

Contoh: Bagaimana Memusatkan Elemen div Secara Menegak Dengan CSS?

Dalam HTML, pertama, tambahkan '

'elemen dan berikannya kelas' kandungan utama ”. Di antara teg “

”, tambahkan “ ” elemen dengan atribut berikut:

---

---

• “ src ” atribut digunakan untuk menentukan URL imej.
• “ segala-galanya ” atribut mentakrifkan beberapa teks yang akan dipaparkan sebagai ganti imej jika ia gagal dimuatkan.
• “ lebar ” atribut digunakan untuk melaraskan lebar imej.
• Kemudian, tambahkan '

  ” elemen untuk membenamkan perenggan ke halaman.

Berikut ialah kod HTML:

< div kelas = 'kandungan utama' >
< img src = '/images/laptop-notepad.jpg' segala-galanya = ' Komputer riba dengan pad nota dan pen' lebar = '300' >
< hlm > Komputer riba adalah komputer mudah alih yang juga dikenali sebagai sebuah komputer notebook. hlm >
div >

Dalam CSS, kami akan menentukan beberapa sifat penggayaan kepada div.

Gaya Kelas 'kandungan utama'.

.kandungan utama {
ketinggian: lima puluh % ;
warna latar belakang: #46C2CB;
saiz fon: 24px;
padding: 10px;
}

Sifat CSS berikut ditakrifkan dalam ' kandungan utama ” kelas:

• “ ketinggian sifat ” digunakan untuk melaraskan ketinggian bekas
  .
• “ warna latar belakang ” mentakrifkan warna latar belakang elemen.
• “ Saiz huruf ” menentukan saiz fon elemen.
• “ padding sifat ” menetapkan ruang di sekeliling kandungan elemen.

Daripada output, anda boleh melihat bahawa kandungan elemen div tidak berada di tengah:

Mari kita teruskan untuk menggunakan sifat CSS yang membantu memusatkan '

” unsur secara menegak. Tambahkan sifat ini pada kelas “ kandungan utama ” yang digunakan untuk mengakses elemen

:

paparan: lentur ;
align-item: tengah;

Berikut adalah penerangannya:

• “ paparan 'harta benda' lentur ” digunakan untuk menjadikan susun atur div fleksibel kepada elemennya.
• “ align-item ” Sifat CSS ditetapkan sebagai “ pusat ”, yang akan menjajarkan elemen div secara menegak.

Pengeluaran

Anda telah mempelajari cara untuk memusatkan elemen div secara menegak untuk semua penyemak imbas menggunakan CSS.

Kesimpulan

Untuk memusatkan elemen div secara menegak, CSS “ paparan 'harta benda digunakan dengan' lentur ” nilai. Nilai ini menjadikan bekas

fleksibel kepada elemennya. Untuk menjajarkan elemen div secara menegak, laraskan “ align-item ” harta dan berikannya “ pusat ” nilai. Blog ini telah menunjukkan kepada anda cara menggunakan CSS untuk memusatkan elemen div secara menegak dalam semua penyemak imbas.