Membuat Posisi Tetap Center Dengan Lebar DIV Sesuai Kontennya

Ditulis oleh: Adhy Suryadi

Ditulis pada: 10/16/2017

Sebenarnya untuk membuat konten berada di tengah, kita bisa menggunakan text-align: center; pada div induknya. Namun bagaimana untuk membuat div induk tersebut tetap berada di tengah dengan lebar yang sesuai dengan lebar kontennya?

Kita bisa membuat lebar div induk sesuai dengan lebar kontennya dengan menggunakan display: inline-block; namun hal ini akan membuat konten berada di sisi kiri dan margin: auto; pun tidak akan pengaruh.

Nah untuk membuat div agar memiliki lebar sesuai dengan lebar konten dan posisinya tetap berada di tengah, maka coba dengan style berikut:

div {

  margin: auto;

  width: fit-content;

  width: -moz-fit-content;

  display: table;

}

CSS di atas bekerja di Chrome, Firefox, Opera (browser-browser tersebut yang saya uji).

Nah hal ini berfungsi agar mudah menambahkan pseudeo element yang berada di atas konten. Karena jika tidak menggunakan CSS di atas maka akan sulit menempatkan pseudeo element berada di atas konten.

Misalnya kita ingin menambahkan pseudeo element (label YES bulat merah) pada setiap gambar postingan yang tidak memiliki lebar penuh seperti pada JSFiddle berikut. Lihat pada tampilan desktop (karena pada mobile atau tampilan sempit gambar akan tampil penuh).


Silahkan lihat CSS dan HTML nya di Fiddle di atas jika Anda ingin membuat seperti itu. Class-nya silahkan sesuaikan dengan blog Anda.

Semoga bermanfaat.