Cara Memusatkan Div Secara Horizontal Menggunakan CSS

Mia Chevalier
Minggu, 16 Juni 2024 02.05.36
HTML and CSS

Menguasai Penyelarasan Div dengan CSS

Memusatkan elemen secara horizontal di CSS adalah tugas umum yang dihadapi pengembang web. Baik itu menyelaraskan tombol, gambar, atau div, mencapai keselarasan sempurna terkadang sulit. Dalam panduan ini, kita akan mengeksplorasi berbagai metode untuk memusatkan a secara horizontal

di dalam yang lain
menggunakan CSS.

Dengan memahami dan menerapkan teknik ini, Anda dapat memastikan bahwa elemen web Anda diposisikan tepat di tempat yang Anda inginkan. Kami akan membahas pendekatan yang berbeda, termasuk flexbox, grid, dan metode tradisional, untuk memberi Anda pemahaman komprehensif tentang keterampilan CSS yang penting ini.

Memerintah Keterangan
display: flex; Mendefinisikan wadah fleksibel dan mengaktifkan tata letak flexbox.
justify-content: center; Memusatkan item secara horizontal dalam wadah fleksibel.
align-items: center; Memusatkan item secara vertikal dalam wadah fleksibel.
place-items: center; Memusatkan item secara horizontal dan vertikal dalam wadah kotak.
transform: translate(-50%, -50%); Menggeser elemen sebesar 50% dari lebar dan tingginya sendiri ke tengah.
position: absolute; Memposisikan suatu elemen relatif terhadap posisi leluhur terdekatnya.
top: 50%; Memposisikan elemen 50% dari atas elemen yang memuatnya.
left: 50%; Memposisikan elemen 50% dari kiri elemen yang memuatnya.

Elemen Pemusatan dengan Flexbox, Grid, dan CSS Tradisional

Skrip pertama menunjukkan cara memusatkan a

menggunakan . Dengan mengatur pada wadah induk, elemen turunan menjadi item fleksibel. Itu properti memusatkan barang-barang ini secara horizontal, sementara align-items: center; memusatkannya secara vertikal. Metode ini sangat serbaguna dan berfungsi dengan baik untuk tata letak dinamis.

Di skrip kedua, kami menggunakan untuk mencapai hasil serupa. Dengan menerapkan ke wadah induk dan , elemen anak dipusatkan secara horizontal dan vertikal. Metode ini sangat berguna untuk tata letak berbasis grid. Terakhir, metode tradisional melibatkan pengaturan position: absolute; pada elemen anak dan menggunakan Dan dengan untuk memusatkannya di dalam induk. Pendekatan ini efektif untuk elemen berukuran tetap.

Menggunakan Flexbox untuk Memusatkan Div secara Horizontal

HTML dan CSS dengan Flexbox

<!DOCTYPE html>
<html>
<head>
<title>Flexbox Centering</title>
<style>
#outer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  border: 1px solid black;
}
#inner {
  padding: 20px;
  background-color: lightblue;
  border: 1px solid blue;
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

Memusatkan Div dengan CSS Grid

HTML dan CSS dengan Tata Letak Grid

<!DOCTYPE html>
<html>
<head>
<title>Grid Centering</title>
<style>
#outer {
  display: grid;
  place-items: center;
  height: 100vh;
  border: 1px solid black;
}
#inner {
  padding: 20px;
  background-color: lightgreen;
  border: 1px solid green;
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

Metode Tradisional untuk Pemusatan dengan CSS

HTML dan CSS dengan Margin Otomatis

<!DOCTYPE html>
<html>
<head>
<title>Traditional Centering</title>
<style>
#outer {
  width: 100%;
  height: 100vh;
  border: 1px solid black;
  position: relative;
}
#inner {
  width: 50px;
  padding: 20px;
  background-color: lightcoral;
  border: 1px solid red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

Teknik Tingkat Lanjut untuk Elemen Pemusatan

Metode lain untuk memusatkan elemen secara horizontal di dalam wadah melibatkan penggunaan Properti. Pendekatan ini sangat efektif untuk elemen inline-block atau inline. Dengan menerapkan ke wadah induk, semua elemen anak akan dipusatkan secara horizontal. Namun, metode ini tidak berfungsi untuk elemen tingkat blok kecuali jika diubah menjadi blok sebaris.

Selain itu, Anda dapat menggunakan properti untuk memusatkan elemen tingkat blok. Dengan mengatur margin kiri dan kanan suatu elemen ke otomatis, Anda dapat memusatkannya secara horizontal di dalam wadah induknya. Teknik ini sederhana dan bekerja dengan baik untuk elemen dengan lebar tetap. Menggabungkan metode ini dengan teknik tata letak CSS modern seperti Flexbox dan Grid menyediakan perangkat komprehensif untuk menyelaraskan elemen sesuai kebutuhan.

  1. Bagaimana cara memusatkan elemen sebaris?
  2. Menggunakan pada wadah induk untuk memusatkan elemen sebaris.
  3. Bisakah saya menggunakan margin: auto; untuk memusatkan elemen blok?
  4. Ya, pengaturan di sisi kiri dan kanan akan memusatkan elemen blok.
  5. Apa perbedaan antara Flexbox dan Grid untuk pemusatan?
  6. digunakan untuk tata letak satu dimensi, sementara adalah untuk tata letak dua dimensi.
  7. Bagaimana cara memusatkan elemen dengan lebar tetap dengan CSS?
  8. Menggunakan atau dengan
  9. Bisakah saya memusatkan elemen secara vertikal dengan Flexbox?
  10. Ya, gunakan untuk memusatkan elemen secara vertikal dalam wadah fleksibel.
  11. Apakah perataan teks: tengah; berfungsi untuk elemen blok?
  12. TIDAK, hanya berfungsi untuk elemen sebaris atau blok sebaris.
  13. Bagaimana cara memusatkan banyak elemen dalam sebuah wadah?
  14. Menggunakan dengan Dan
  15. Apa yang dimaksud dengan item tempat: tengah; di Grid?
  16. memusatkan item baik secara horizontal maupun vertikal dalam wadah kotak.
  17. Apakah mungkin untuk memusatkan elemen tanpa Flexbox atau Grid?
  18. Ya, menggunakan metode seperti , , atau juga dapat memusatkan elemen.

Menyelesaikan Teknik Pemusatan CSS

Memahami cara memusatkan elemen secara horizontal menggunakan metode CSS yang berbeda sangat penting untuk membuat tata letak web yang menarik secara visual. Dengan menguasai teknik seperti , , Dan properti, pengembang dapat memastikan desain mereka fungsional dan estetis. Bereksperimen dengan metode ini akan memberikan pemahaman yang lebih mendalam tentang kemampuan CSS.