Cara membuat gambar rata tengah di html

Bagaimana cara membuat teks atau elemen di tengah halaman web? . Walaupun terdengar sederhana, namun faktanya membuat posisi elemen di tengah dengan CSS itu mudah dan sulit. Yuk langsung praktekkan tutorial berikut ini

Pertama-tama saya berterima kasih atas keberadaan CSS Flexbox alias display:flex yang telah menyederhanakan teknik mediasi elemen di web dan blog. Sebelum keduanya ada, biasanya saya (dan mungkin kebanyakan orang juga) menggunakan position:absolute atau position:fixed

Saya tidak mengatakan bahwa position itu buruk atau kuno, hanya saja saya merasa bahwa

<!-- Center Element Vertical by igniel.com -->
.center {
  display: flex;
  align-items: center;
  height: 100%;
}

<!-- Center Element Vertical by igniel.com -->
.center {
  display: flex;
  align-items: center;
  height: 100%;
}

<!-- Center Element Vertical by igniel.com -->
.center {
  display: flex;
  align-items: center;
  height: 100%;
}

<!-- Center Element Vertical by igniel.com -->
.center {
  display: flex;
  align-items: center;
  height: 100%;
}

<!-- Center Element Vertical by igniel.com -->
.center {
  display: flex;
  align-items: center;
  height: 100%;
}

<!-- Center Element Vertical by igniel.com -->
.center {
  display: flex;
  align-items: center;
  height: 100%;
}

Sehingga posisi elemen berada di tengah-tengah blog

Saya akan membuat kelas CSS baru bernama

<!-- Center Element Vertical by igniel.com -->
.center {
  display: flex;
  align-items: center;
  height: 100%;
}

PENTING. Pastikan dulu tidak ada kelas CSS lain yang bernama

<!-- Center Element Vertical by igniel.com -->
.center {
  display: flex;
  align-items: center;
  height: 100%;
}

<!-- Center Element Vertical by igniel.com -->
.center {
  display: flex;
  align-items: center;
  height: 100%;
}

1. Posisi Tengah Horisontal

Bisa juga disebut posisi elemen di tengah yang rata kiri dan kanan. Ini adalah posisi tengah yang biasanya dimaksud orang

<!-- Center Element Horizontal by igniel.com -->
.center {
  display: flex;
  justify-content: center;
}

Baca Juga. Cara Menempatkan Iklan Berulang di Tengah Artikel

2. Posisi Tengah Vertikal

Anda juga bisa menyebutnya posisi tengah rata atas dan bawah. Sebenarnya hampir tidak ada orang yang menggunakan posisi ini, tetapi saya akan tetap menulisnya. Posisinya akan mengikuti ketinggian elemen utama

Baca Juga. Cara Menempatkan Multi Related Post di Tengah Artikel

Artinya jika blog masih kosong, otomatis badan blog akan setinggi teks. Jadi jika ingin menggunakan posisi ini, pastikan tubuh memiliki tinggi badan yang cukup agar posisinya terlihat di tengah

<!-- Center Element Vertical by igniel.com -->
.center {
  display: flex;
  align-items: center;
  height: 100%;
}

3. Posisi Tengah Horizontal dan Vertikal

Posisi elemen di tengah rata, kiri, kanan, atas, bawah. Ini juga cukup sering dicari

<!-- Center Element Horizontal Vertical by igniel.com -->
.center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

Cara Menggunakan Elemen Posisi CSS di Tengah

1. Pilih salah satu kode CSS yang sudah ditulis diatas
2. Simpan kode di pengaturan blog
3. Saat menulis artikel, buatlah elemen

   <!-- Center Element Vertical by igniel.com -->
   .center {
     display: flex;
     align-items: center;
     height: 100%;
   }

   9 dan beri nama class

   <!-- Center Element Vertical by igniel.com -->
   .center {
     display: flex;
     align-items: center;
     height: 100%;
   }

   6 seperti contoh berikut

<div class="center">
  <!-- Tuliskan teks atau elemen apapun yang ingin ditempatkan di tengah -->
</div>

Anda juga bisa menambahkan properti

<!-- Center Element Horizontal Vertical by igniel.com -->
.center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

<!-- Center Element Horizontal Vertical by igniel.com -->
.center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

flex: 1 0 100%

Kode di atas merupakan bentuk singkatan CSS yang jika dijelaskan memiliki nilai sebagai berikut

• tumbuh fleksibel. 1;
  Memastikan bahwa elemen tumbuh sampai akhir (mengembang)
• flex-menyusut. 0;
  Memastikan lebar elemen tidak menyusut
• berbasis fleksibel. 100%
  Lebar elemen 100% mengikuti lebar induknya

Jadi kodenya kurang lebih seperti ini

<!-- Center Element Horizontal Vertical by igniel.com -->
.center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex: 1 0 100%;
}

Itulah tutorial singkat cara membuat elemen di tengah posisi blog/web menggunakan CSS. Semoga bisa menambah sedikit informasi

Bagaimana cara menyisipkan gambar dalam HTML?

Tulis cara Menampilkan gambar dalam HTML?

Tutorial Mudah Cara Menyisipkan Gambar di HTML .

Pilih Gambar dengan Format yang Sesuai. Untuk menampilkan gambar di website, pastikan untuk memilih format yang sesuai yang disediakan oleh HTML. .

2. Familiar dengan Tag .. .

3. Berikan Atribut Teks Alt. .

Menambahkan Deskripsi ke Gambar

Langkah-langkah membuat pusat teks paragraf terpusat di HTML?

Apa HTML yang benar untuk menyisipkan gambar latar belakang?