CSS: Cara Menengahkan Kotak di Dalam Kotak Secara Horizontal Dengan Mudah

posted in: Blog | 0

Apakah kamu pernah merasa frustasi memikirkan cara untuk menengahkan kotak di dalam kotak secara horizontal dengan CSS? Saya pernah. Kita mencari kemana-kemana, membaca halaman demi halaman, namun kita tidak mendapatkan jawaban yang sederhana dan spesifik.

Jangan khawatir, sekarang saya sudah menemukan jawabannya dan saya ingin membagikannya denganmu untuk menghemat waktu dan energimu.

Kode untuk kotak di dalam kotak:

<div id="outer-box">
   <div id="inner-box">
      some texts
   </div>
</div>

Ada dua tipe kotak inner-box yang mungkin akan kita temui:

  1. Yang tanpa lebar tetap
  2. Yang dengan lebar tetap

Cara menengahkannya masing-masing berbeda.

1. Tanpa Lebar Tetap

Terapkan text-align: center pada outer-box.
Terapkan display: inline-box pada inner-box.

#outer-box {
  text-align: center; 
  border: 1px solid red
}

#inner-box {
  display: inline-block; 
  border: 1px solid blue
}

Saya tambahkan border agar kamu dapa melihat hasilnya secara visual.

2. Dengan Lebar Tetap

Ada 4 persyaratan yang harus dimiliki oleh inner-box:

  1. harus memiliki width dan bukan auto.
  2. harus display: block.
  3. harusĀ tidak float.
  4. harus tidak memiliki fixed atau absolute position.
#outer-box {border: 1px solid red;}
         
#inner-box {
  display: block; 
  width: 100px; 
  position:relative; 
  margin:0 auto; 
  border: 1px solid blue;
}

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.