Cara menggunakan css parent

Halo, pada sesi ini saya ingin sekali menuliskan sebuah trik CSS yang sangat sering sekali digunakan dan sangat membantu sekali dalam proses konversi desain web menjadi sebuah HTML template berdasarkan pengalaman saya sendiri.

Absolute dan relative yang kita bahas di sini adalah sebuah value dari sebuah property position pada CSS. Pada CSS, kita dapat menggunakannya melalui selector id atau class.

Yang ingin saya bahas di sini adalah:

• Mengamati apa yang terjadi jika suatu elemen absolute berada pada elemen relative.
• Apa yang dapat dilakukan pada elemen absolute di dalam elemen relative tersebut

Pertama saya ingin memperlihatkan penggunaan position absolute terlebih dahulu, lihat code berikut:

Absolute

Pada tab result, perhatikan kotak berwarna pink. Kotak tersebut memiliki atribut class child yang memiliki style CSS yaitu position absolute, silakan lihat pada tab HTML dan CSS.

Jadi ketika suatu elemen tersebut absolute, maka letak posisi dari elemen tersebut tidak terikat pada elemen manapun, walaupun elemen absolute tersebut berada di dalam elemen lain.

Pada contoh di atas, elemen kotak berwarna pink keluar dari elemen kotak berwarna biru. Padahal jika kita lihat pada struktur HTML-nya, elemen kotak berwarna pink tersebut berada di dalam elemen kotak berwarna biru.

Untuk posisi dari elemen absolute tersebut ditentukan pada property top dan left, lihat pada contoh di atas pada tab CSS pada class child.

Property top, left, right dan bottom hanya dapat digunakan pada elemen yang selector-nya memiliki property position absolute atau relative, seperti pada class child pada contoh di atas.

Selanjut nya kita akan melihat apa yang terjadi jika kotak berwarna biru dengan class parent kita tambahkan property position: relative pada code CSS nya. Bisa kita lihat pada contoh code di bawah ini:

Absoute Relative

Dari hasil di atas dapat kita lihat elemen pink dengan position absolute tersebut terikat pada elemen yang berwarna biru.

Dengan demikian dapat disimpulkan bahwa elemen relative dapat mengikat atau membatasi elemen absolute yang ada didalamnya

Setelah mengetahui apa yang terjadi jika elemen absolute berada pada elemen relative, maka kita dapat melekukan trik yang hanya dapat dilakukan jika elemen absolute berada di dalam elemen relative.

Yaitu kita dapat membuat suatu elemen berada di tengah-tengah atau middle center.

Untuk lebih jelas nya mari kita lihat contoh di bawah ini:

Middle Center

Dari contoh di atas dapat kita lihat, elemen kotak berwarna pink berada di tengah-tengah element kotak berwarna hitam. Caranya adalah dengan sedikit menambahkan code CSS berikut pada class child seperti di bawah ini

top: 50%;
right: 50%;
margin-top: -15px;
margin-right: -15px;

Kita juga dapat melakukan cara di atas dengan menggunakan CSS3 Transform: translate(). Silahkan lihat contoh berikut:

Transform Translate

Contoh di atas adalah salah satu contoh penggunaan absolute di dalam relative masih ada beberapa hal lain yang dapat kita lakukan.

Tidak hanya middle center, dengan memanfaatkan absolute di dalam relative kita dapat membuat hal lain yang sangat membatu kita dalam mengkonversi sebuah desain web menjadi sebuah HTML template.

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

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

0:

  
Hello, (centered) World!

.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

1 singkat dengan nilai

2 untuk memusatkan elemen bertingkat blok seperti

3 secara horizontal:

.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

4 dan

5 untuk elemen parent:

.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

6 elemen parent dengan

7.

Kemudian, untuk elemen child, isi properti

6 dengan

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:

.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

6 elemen parent menjadi

7.

Untuk elemen child, atur properti

6 menjadi

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

0 saja:

.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

1 adalah singkatan dari

2 dan

3. Kamu juga bisa memakai

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

4 dan

6 pada elemen parent:

.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

6 elemen parent menjadi

7.

Kemudian atur properti

6 child menjadi

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:

.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

6 elemen parent menjadi

7.

Kemudian, atur properti

6 elemen child menjadi

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

3 supaya betul-betul memusatkan elemen child:

.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

5 dan

6 pada elemen parent:

.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.

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

---

Author: Kris Koishigawa (English)

Read more posts.

Translator: Kevin Matthew

Read more posts.

---

If you read this far, tweet to the author to show them you care. Tweet a thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started