Cara Memusatkan Elemen div Secara Vertikal untuk semua Peramban Menggunakan CSS

Dalam pengembangan web, sangat penting untuk membuat tata letak elemen dengan benar. Namun, banyak properti CSS, seperti Kotak Fleksibel CSS3, berguna untuk menyesuaikan tata letak halaman web dan elemen HTML. Flexible Box digunakan untuk mengatur halaman web dan aplikasi secara rekursif. Mode Flexbox ini membantu membuat tata letak untuk halaman web dan aplikasi yang kompleks.

Posting ini akan memandu Anda tentang cara memusatkan elemen div untuk semua browser menggunakan CSS secara vertikal.

Bagaimana cara menyelaraskan elemen div menggunakan CSS?

Elemen div dapat disejajarkan secara vertikal dengan menggunakan properti display “ melenturkan ' bersama dengan CSS ' menyelaraskan-item ” properti dan “ membenarkan-konten ' Properti. Properti 'align-items' menyelaraskan elemen secara vertikal, dan properti 'justify-content' menyelaraskan konten secara horizontal.

Contoh: Bagaimana Memusatkan Elemen div Secara Vertikal Dengan CSS?

Dalam HTML, pertama, tambahkan “

' elemen dan tetapkan kelas ' isi utama ”. Di antara tag “

”, tambahkan “ ” elemen dengan atribut berikut:

---

---

• “ src Atribut ” digunakan untuk menentukan URL gambar.
• “ semuanya ” Atribut mendefinisikan beberapa teks yang akan ditampilkan menggantikan gambar jika gagal dimuat.
• “ lebar Atribut ” digunakan untuk mengatur lebar gambar.
• Kemudian, tambahkan “

  ” untuk menyematkan paragraf ke halaman.

Ini kode HTMLnya:

< div kelas = 'isi utama' >
< img src = '/images/laptop-notepad.jpg' semuanya = 'Laptop dengan notepad dan pulpen' lebar = '300' >
< p > Laptop adalah komputer portabel juga dikenal sebagai komputer notebook. p >
div >

Di CSS, kami akan menentukan beberapa properti gaya ke div.

Gaya Kelas 'konten utama'.

.isi utama {
tinggi: lima puluh % ;
warna latar belakang: #46C2CB;
ukuran font: 24px;
padding: 10px;
}

Properti CSS berikut didefinisikan dalam ' isi utama ' kelas:

• “ tinggi ” properti digunakan untuk mengatur ketinggian wadah
  .
• “ warna latar belakang ” menentukan warna latar belakang elemen.
• “ ukuran huruf ” menentukan ukuran font elemen.
• “ lapisan ” properti mengatur ruang di sekitar konten elemen.

Dari output, Anda dapat mengamati bahwa konten elemen div tidak berada di tengah:

Mari lanjutkan untuk menerapkan properti CSS yang membantu memusatkan “

elemen ” secara vertikal. Tambahkan properti ini ke kelas “ isi utama ” yang digunakan untuk mengakses elemen

:

menampilkan: melenturkan ;
menyelaraskan-item: pusat;

Berikut deskripsinya:

• “ menampilkan ' Properti ' melenturkan ” digunakan untuk membuat tata letak div fleksibel untuk elemennya.
• “ menyelaraskan-item ” Properti CSS ditetapkan sebagai “ tengah ”, yang akan menyelaraskan elemen div secara vertikal.

Keluaran

Anda telah mempelajari cara memusatkan elemen div secara vertikal untuk semua browser menggunakan CSS.

Kesimpulan

Untuk memusatkan elemen div secara vertikal, CSS “ menampilkan Properti ” digunakan dengan properti “ melenturkan ' nilai. Nilai ini membuat wadah

fleksibel terhadap elemen-elemennya. Untuk menyelaraskan elemen div secara vertikal, sesuaikan tombol “ menyelaraskan-item ” properti dan tetapkan sebagai “ tengah ' nilai. Blog ini telah menunjukkan kepada Anda cara menggunakan CSS untuk memusatkan elemen div secara vertikal di semua browser.