Cara menggunakan child element in html

Question

Metodenya sendiri sebenarnya tidak terlalu sulit untuk dipahami. Akan tetapi, sulit di sini lebih kepada banyaknya cara untuk memusatkan sesuatu.

Table of Contents Show

Cara Membuat Elemen di Tengah Secara Horizontal
Cara Memusatkan Teks Menggunakan Properti CSS Text-Align Center
Cara Memusatkan Div Menggunakan Margin Auto CSS
Cara Memusatkan Div Secara Horizontal Menggunakan Flexbox
Cara Membuat Elemen di Tengah Secara Vertikal
Cara Menempatkan Div di Tengah Secara Vertikal dengan Pemosisian Absolut dan Margin Negatif CSS
Cara Menempatkan Div di Tengah Secara Vertikal Menggunakan Transform dan Translate
Cara Membuat Div di Tengah Secara Vertikal dengan Flexbox
Cara Memusatkan Elemen Secara Vertikal dan Horizontal
Cara Menempatkan Div di Tengah dengan Pemosisian Absolut dan Margin Negatif CSS
Cara Membuat Div di Tengah Secara Vertikal dan Horizontal dengan Transform dan Translate
Cara Membuat Div di Tengah Secara Vertikal dan Horizontal dengan Flexbox
Apa itu Child selector?
Apa itu nth Child () CSS?
Last Child pada CSS untuk apa?
Apa itu Descendant selector?

Metode yang kamu gunakan dapat berbeda tergantung dengan elemen HTML yang kamu sedang coba untuk dipusatkan, atau apakah kamu ingin membuatnya di tengah secara horizontal atau vertikal.

Dalam tutorial ini, kami akan menjelaskan bagaimana memusatkan elemen-elemen yang berbeda secara horizontal, vertikal, dan juga secara horizontal dan vertikal sekaligus.

Cara Membuat Elemen di Tengah Secara Horizontal

Memusatkan elemen di tengah secara horizontal biasanya lebih mudah dibandingkan secara vertikal. Berikut adalah beberapa elemen umum yang mungkin ingin kamu pusatkan secara horizontal beserta beberapa cara yang berbeda untuk memusatkannya.

Cara Memusatkan Teks Menggunakan Properti CSS Text-Align Center

Untuk memusatkan teks atau tautan secara horizontal, gunakan properti

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

p {
  /* Pusatkan secara horizontal*/
  text-align: center;
}

9 dengan nilai

<div class="container">
  <div class="child"></div>
</div>

0:

<div class="container">
  <p>Hello, (centered) World!</p>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

p {
  /* Pusatkan secara horizontal*/
  text-align: center;
}

Cara Memusatkan Div Menggunakan Margin Auto CSS

Gunakan properti

<div class="container">
  <div class="child"></div>
</div>

1 singkat dengan nilai

<div class="container">
  <div class="child"></div>
</div>

2 untuk memusatkan elemen bertingkat blok seperti

<div class="container">
  <div class="child"></div>
</div>

3 secara horizontal:

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Pusatkan secara horizontal*/
  margin: 0 auto;
}

Cara Memusatkan Div Secara Horizontal Menggunakan Flexbox

Flexbox adalah cara paling modern untuk membuat elemen di tengah pada suatu halaman, dan ia membuat proses desain layout responsif lebih mudah dibandingkan sebelumnya. Akan tetapi, flexbox belum sepenuhnya didukung pada beberapa browser lama seperti Internet Explorer.

Untuk membuat elemen di tengah secara horizontal menggunakan Flexbox, terapkan

<div class="container">
  <div class="child"></div>
</div>

4 dan

<div class="container">
  <div class="child"></div>
</div>

5 untuk elemen parent:

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* Pusatkan child secara horizontal*/
  display: flex;
  justify-content: center;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
}

Cara Membuat Elemen di Tengah Secara Vertikal

Menempatkan elemen di tengah secara vertikal tanpa menggunakan metode modern seperti Flexbox bisa menjadi pekerjaan yang sulit. Di sini, kita akan membahas beberapa metode lama yang digunakan untuk memusatkan elemen di tengah secara vertikal dulu, lalu menunjukkan cara melakukannya dengan Flexbox.

Cara Menempatkan Div di Tengah Secara Vertikal dengan Pemosisian Absolut dan Margin Negatif CSS

Untuk waktu yang lama, ini merupakan cara untuk menempatkan elemen-elemen di tengah secara vertikal. Untuk metode ini kamu harus mengetahui tinggi elemen yang ingin kamu pusatkan.

Pertama-tama, isi properti

<div class="container">
  <div class="child"></div>
</div>

6 elemen parent dengan

<div class="container">
  <div class="child"></div>
</div>

7.

Kemudian, untuk elemen child, isi properti

<div class="container">
  <div class="child"></div>
</div>

6 dengan

<div class="container">
  <div class="child"></div>
</div>

9 dan

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Pusatkan secara horizontal*/
  margin: 0 auto;
}

0 dengan

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Pusatkan secara horizontal*/
  margin: 0 auto;
}

1:

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* Atur */
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Pusatkan secara vertikal */
  position: absolute;
  top: 50%;
}

Tetapi, ini hanya memusatkan sisi atas dari elemen child.

Supaya betul-betul memusatkan elemen child, atur properti

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Pusatkan secara horizontal*/
  margin: 0 auto;
}

2 menjadi

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Pusatkan secara horizontal*/
  margin: 0 auto;
}

3:

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* Atur */
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Pusatkan secara vertikal */
  position: absolute;
  top: 50%;
  margin-top: -25px; /* Setengah tinggi elemen ini */
}

Cara Menempatkan Div di Tengah Secara Vertikal Menggunakan Transform dan Translate

Kalau kamu tidak tahu tinggi elemen yang kamu ingin pusatkan (atau meskipun kamu tahu juga), metode ini adalah trik yang bagus.

Metode ini sangat mirip dengan metode margin negatif di atas. Atur properti

<div class="container">
  <div class="child"></div>
</div>

6 elemen parent menjadi

<div class="container">
  <div class="child"></div>
</div>

7.

Untuk elemen child, atur properti

<div class="container">
  <div class="child"></div>
</div>

6 menjadi

<div class="container">
  <div class="child"></div>
</div>

9 dan atur

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Pusatkan secara horizontal*/
  margin: 0 auto;
}

0 menjadi

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Pusatkan secara horizontal*/
  margin: 0 auto;
}

1. Sekarang, alih-alih menggunakan margin negatif untuk betul-betul memusatkan elemen child, gunakan

<div class="container">
  <div class="child"></div>
</div>

0 saja:

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

p {
  /* Pusatkan secara horizontal*/
  text-align: center;
}

0

Ingat bahwa

<div class="container">
  <div class="child"></div>
</div>

1 adalah singkatan dari

<div class="container">
  <div class="child"></div>
</div>

2 dan

<div class="container">
  <div class="child"></div>
</div>

3. Kamu juga bisa memakai

<div class="container">
  <div class="child"></div>
</div>

4 untuk memusatkan elemen child secara vertikal.

Cara Membuat Div di Tengah Secara Vertikal dengan Flexbox

Seperti memusatkan elemen secara horizontal, Flexbox membuat memusatkan elemen secara vertikal menjadi sangat gampang.

Untuk memusatkan elemen secara vertikal, terapkan

<div class="container">
  <div class="child"></div>
</div>

4 dan

<div class="container">
  <div class="child"></div>
</div>

6 pada elemen parent:

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

p {
  /* Pusatkan secara horizontal*/
  text-align: center;
}

2

Cara Memusatkan Elemen Secara Vertikal dan Horizontal

Cara Menempatkan Div di Tengah dengan Pemosisian Absolut dan Margin Negatif CSS

Ini sangat mirip dengan metode di atas untuk memusatkan elemen secara vertikal. Seperti sebelumnya, kamu harus mengetahui lebar dan tinggi elemen yang mau kamu pusatkan.

Atur properti

<div class="container">
  <div class="child"></div>
</div>

6 elemen parent menjadi

<div class="container">
  <div class="child"></div>
</div>

7.

Kemudian atur properti

<div class="container">
  <div class="child"></div>
</div>

6 child menjadi

<div class="container">
  <div class="child"></div>
</div>

9,

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Pusatkan secara horizontal*/
  margin: 0 auto;
}

0 menjadi

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Pusatkan secara horizontal*/
  margin: 0 auto;
}

1, dan

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* Pusatkan child secara horizontal*/
  display: flex;
  justify-content: center;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
}

3 menjadi

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Pusatkan secara horizontal*/
  margin: 0 auto;
}

1. Ini hanya memusatkan sudut kiri atas elemen child secara vertikal dan horizontal.

Supaya betul-betul memusatkan elemen child, terapkan margin negatif atas, atur menjadi setengah tinggi elemen, dan margin negatif kiri, atur menjadi setengah lebar elemen child:

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

p {
  /* Pusatkan secara horizontal*/
  text-align: center;
}

4

Cara Membuat Div di Tengah Secara Vertikal dan Horizontal dengan Transform dan Translate

Gunakan metode ini untuk membuat elemen di tengah jika kamu tidak tahu dimensi persisnya dan tidak bisa menggunakan Flexbox.

Pertama-tama, atur properti

<div class="container">
  <div class="child"></div>
</div>

6 elemen parent menjadi

<div class="container">
  <div class="child"></div>
</div>

7.

Kemudian, atur properti

<div class="container">
  <div class="child"></div>
</div>

6 elemen child menjadi

<div class="container">
  <div class="child"></div>
</div>

9,

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Pusatkan secara horizontal*/
  margin: 0 auto;
}

0 menjadi

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Pusatkan secara horizontal*/
  margin: 0 auto;
}

1, dan

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* Pusatkan child secara horizontal*/
  display: flex;
  justify-content: center;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
}

3 menjadi

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Pusatkan secara horizontal*/
  margin: 0 auto;
}

1.

Terakhir, gunakan

<div class="container">
  <div class="child"></div>
</div>

3 supaya betul-betul memusatkan elemen child:

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

p {
  /* Pusatkan secara horizontal*/
  text-align: center;
}

6

Cara Membuat Div di Tengah Secara Vertikal dan Horizontal dengan Flexbox

Flexbox adalah cara yang paling gampang untuk membuat elemen di tengah secara vertikal dan horizontal.

Ini hanyalah gabungan dua metode-metode Flexbox sebelumnya. Untuk membuat elemen di tengah secara horizontal atau vertikal, terapkan

<div class="container">
  <div class="child"></div>
</div>

5 dan

<div class="container">
  <div class="child"></div>
</div>

6 pada elemen parent:

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

p {
  /* Pusatkan secara horizontal*/
  text-align: center;
}

8

Itulah semua yang kamu perlu tahu mengenai cara membuat elemen di tengah menggunakan cara-cara yang terbaik. Sekarang, cobalah memusatkan semua elemennya.

Author: Kris Koishigawa (English)

Apa itu Child selector?

Child Selector adalah selector di dalam CSS yang penggunaannya di dasarkan pada struktur urutan tag HTML. Karena tag-tag HTML dapat berisi tag lain, maka struktur HTML dapat diibaratkan dengan 'pohon keluarga'.

Apa itu nth Child () CSS?

Yang dimaksud nth-child adalah selector yang digunakan untuk memberikan property pada tag atau class yang yang ada pada urutan tertentu.

Last Child pada CSS untuk apa?

Pseudo class tersebut baru diperkenalkan padaÂ CSS 3, digunakan untuk menseleksi element children yang berada pada urutan terakhir. Element children ini berlaku untuk tiap-tiap parent yang ada di dalam suatu group element.

Apa itu Descendant selector?

Selector descendant berarti selector yang merupakan turunan dari sesuatu. Direct child selector berarti turunan secara langsung atau anak. Untuk indirect Adjacent Sibling ini adalah seperti Direct Adjacent Sibling tetapi letaknya tidak harus berdekatan.

kode html