Cara Mendatar Memusatkan Div Menggunakan CSS

Cara Mendatar Memusatkan Div Menggunakan CSS
Cara Mendatar Memusatkan Div Menggunakan CSS
Mia Chevalier
Ahad, 16 Jun 2024 2:22:02 PG

Menguasai Penjajaran Div dengan CSS

Memusatkan elemen secara mendatar dalam CSS ialah tugas biasa yang dihadapi oleh pembangun web. Sama ada menjajarkan butang, imej atau div, mencapai penjajaran sempurna kadangkala boleh menjadi rumit. Dalam panduan ini, kami akan meneroka pelbagai kaedah untuk memusatkan a secara mendatar

dalam yang lain
menggunakan CSS.

Dengan memahami dan menggunakan teknik ini, anda boleh memastikan bahawa elemen web anda diletakkan dengan tepat di tempat yang anda inginkan. Kami akan merangkumi pendekatan yang berbeza, termasuk flexbox, grid dan kaedah tradisional, untuk memberi anda pemahaman yang menyeluruh tentang kemahiran CSS penting ini.

Perintah Penerangan
display: flex; Mentakrifkan bekas flex dan membolehkan susun atur flexbox.
justify-content: center; Memusatkan item secara mendatar dalam bekas fleksibel.
align-items: center; Memusatkan item secara menegak dalam bekas fleksibel.
place-items: center; Memusatkan item secara mendatar dan menegak dalam bekas grid.
transform: translate(-50%, -50%); Mengalihkan elemen sebanyak 50% daripada lebar dan ketinggiannya sendiri untuk memusatkannya.
position: absolute; Meletakkan unsur relatif kepada nenek moyang kedudukan terdekatnya.
top: 50%; Letakkan elemen 50% dari bahagian atas unsur yang mengandunginya.
left: 50%; Letakkan elemen 50% dari kiri unsur yang mengandunginya.

Memusatkan Elemen dengan Flexbox, Grid dan CSS Tradisional

Skrip pertama menunjukkan cara memusatkan a

menggunakan Flexbox. Dengan menetapkan display: flex; pada bekas induk, elemen anak menjadi item fleksibel. The justify-content: center; harta memusatkan item ini secara mendatar, manakala align-items: center; memusatkan mereka secara menegak. Kaedah ini sangat serba boleh dan berfungsi dengan baik untuk reka letak dinamik.

Dalam skrip kedua, kami menggunakan CSS Grid untuk mencapai hasil yang serupa. Dengan memohon display: grid; kepada bekas induk dan place-items: center;, elemen kanak-kanak dipusatkan secara mendatar dan menegak. Kaedah ini amat berguna untuk susun atur berasaskan grid. Akhirnya, kaedah tradisional melibatkan penetapan position: absolute; pada elemen kanak-kanak dan menggunakan top: 50%; dan left: 50%; dengan transform: translate(-50%, -50%); untuk memusatkannya dalam ibu bapa. Pendekatan ini berkesan untuk elemen bersaiz tetap.

Menggunakan Flexbox untuk Mendatar Memusatkan Div

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 Grid CSS

HTML dan CSS dengan Susun Atur 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>

Kaedah Tradisional untuk Pemusatan dengan CSS

HTML dan CSS dengan Auto Margin

<!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 Lanjutan untuk Elemen Pemusatan

Kaedah lain untuk memusatkan elemen secara mendatar dalam bekas melibatkan penggunaan text-align: center; harta benda. Pendekatan ini amat berkesan untuk elemen blok sebaris atau sebaris. Dengan memohon text-align: center; ke bekas induk, semua elemen anak akan dipusatkan secara mendatar. Walau bagaimanapun, kaedah ini tidak berfungsi untuk elemen peringkat blok melainkan ia ditukar kepada blok sebaris.

Selain itu, anda boleh menggunakan margin: auto; harta untuk memusatkan elemen peringkat blok. Dengan menetapkan jidar kiri dan kanan elemen kepada auto, anda boleh mendatar memusatkannya dalam bekas induknya. Teknik ini mudah dan berfungsi dengan baik untuk elemen lebar tetap. Menggabungkan kaedah ini dengan teknik susun atur CSS moden seperti Flexbox dan Grid menyediakan kit alat yang komprehensif untuk menjajarkan elemen dengan tepat seperti yang diperlukan.

Soalan dan Jawapan Lazim Mengenai Elemen Pemusatan

  1. Bagaimanakah saya memusatkan elemen sebaris?
  2. guna text-align: center; pada bekas induk untuk memusatkan elemen sebaris.
  3. Bolehkah saya menggunakan margin: auto; untuk memusatkan elemen blok?
  4. Ya, tetapan margin: auto; di sebelah kiri dan kanan akan memusatkan elemen blok.
  5. Apakah perbezaan antara Flexbox dan Grid untuk pemusatan?
  6. Flexbox digunakan untuk susun atur satu dimensi, manakala Grid adalah untuk susun atur dua dimensi.
  7. Bagaimanakah saya memusatkan elemen lebar tetap dengan CSS?
  8. guna margin: auto; atau position: absolute; dengan transform: translate(-50%, -50%);
  9. Bolehkah saya memusatkan elemen secara menegak dengan Flexbox?
  10. Ya, gunakan align-items: center; untuk memusatkan elemen secara menegak dalam bekas fleksibel.
  11. Adakah text-align: center; bekerja untuk elemen blok?
  12. tidak, text-align: center; hanya berfungsi untuk elemen sebaris atau blok sebaris.
  13. Bagaimanakah saya memusatkan berbilang elemen dalam bekas?
  14. guna display: flex; dengan justify-content: center; dan align-items: center;
  15. Apakah tempat-item: pusat; dalam Grid?
  16. place-items: center; memusatkan item secara mendatar dan menegak dalam bekas grid.
  17. Adakah mungkin untuk memusatkan elemen tanpa Flexbox atau Grid?
  18. Ya, menggunakan kaedah seperti margin: auto;, text-align: center;, atau position: absolute; juga boleh memusatkan elemen.

Membungkus Teknik Pemusatan CSS

Memahami cara memusatkan elemen secara mendatar menggunakan kaedah CSS yang berbeza adalah penting untuk mencipta reka letak web yang menarik secara visual. Dengan menguasai teknik seperti Flexbox, Grid, dan traditional CSS hartanah, pembangun boleh memastikan reka bentuk mereka berfungsi dan menyenangkan dari segi estetika. Bereksperimen dengan kaedah ini akan memberikan pemahaman yang lebih mendalam tentang keupayaan CSS.