Membuat Posisi Tetap Center Dengan Lebar Div Sesuai Kontennya

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

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

Nah untuk menciptakan div semoga mempunyai 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 aku uji).

Nah hal ini berfungsi semoga gampang menambahkan pseudeo element yang berada di atas konten. Karena jikalau tidak memakai CSS di atas maka akan sulit menempatkan pseudeo element berada di atas konten.

Misalnya kita ingin menambahkan pseudeo element (label YES lingkaran merah) pada setiap gambar postingan yang tidak mempunyai lebar penuh ibarat 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 jikalau Anda ingin menciptakan ibarat itu. Class-nya silahkan sesuaikan dengan blog Anda.

Semoga bermanfaat.


Sumber https://www.kompiajaib.com/

Share this post