. .
[iklan]

Membuat Image Center Vertical dan Center Horizontal

Kali ini menyimpan catatan untuk membuat image menjadi center secara vertikal dan juga horizontal. Masih dalam seri css dan html. Teman-teman yang kebetulan sedang mencari cara membuat gambar berada ditengah secara vertikal dan sekaligus secara horizonal, bisa copas code yang disematkan dibawah. Tinggal copas, kemudian, edit ukuran dan link gambarnya.


Tinggi dan lebar image lebih kecil dari frame


Tinggi image lebih besar dari frame


Lebar image lebih besar dari frame




Berikut code css dan htmlnya, bisa dicopas, lalu diedit.
<style>
    .kotak-luar{
        display: inline-block;
        margin: 20px;
      padding:0;
    }
    .frame{  
        width: 250px;
        height: 250px;
        border: 1px solid black;
        vertical-align: middle;
        text-align: center;
        display: table-cell;
    }    
    .frame img{
        max-width: 100%;
        max-height: 100%;
        display: block;
        margin: 0 auto;
    }
</style>


    <div class="kotak-luar">
        <div class="frame">
            <img src="https://1.bp.blogspot.com/-P_KVg0LqXYQ/YQZBniqaJzI/AAAAAAAAUkk/OxMh6oU9_toEQe0SMDH1Z1PpUH1zN2Z2ACLcBGAsYHQ/s90/Brosur%2BAhsana%2BPro%2BMojokerto%2BKota.webp"/>
        </div>
    </div>
    <br>

    <div class="kotak-luar">
        <div class="frame">
            <img src="https://1.bp.blogspot.com/-P_KVg0LqXYQ/YQZBniqaJzI/AAAAAAAAUkk/OxMh6oU9_toEQe0SMDH1Z1PpUH1zN2Z2ACLcBGAsYHQ/s200/Brosur%2BAhsana%2BPro%2BMojokerto%2BKota.webp"/>
        </div>
    </div>
    <br>

    <div class="kotak-luar">
        <div class="frame">
            <img src="https://1.bp.blogspot.com/-P_KVg0LqXYQ/YQZBniqaJzI/AAAAAAAAUkk/OxMh6oU9_toEQe0SMDH1Z1PpUH1zN2Z2ACLcBGAsYHQ/s320/Brosur%2BAhsana%2BPro%2BMojokerto%2BKota.webp"/>
        </div>
    </div>



Demikian cara membuat gambar atau image menjadi center atau ditengah-tengah pada bagian secara vertikal dan juga secara horizontal. Semoga berguna bagi teman-teman semua, dan juga saat kami membutuhkan lagi di kemudian hari, tinggal copas codenya.


Untuk tampilan layar yang lebar, saya tambahkan code flex agar tampilan kotak-luar frame image yang ditampilkan ini bisa berjajar secara horizontal dengan jarak yang flesibel, dan jika tampilan layar lebih kecil, maka otomatis kotak-luar akan tampil di baris berikutnya.

Berikut adalah codenya

display:flex;justify-content:space-around;align-items:center;gap:6px;flex-wrap:wrap;


Kode atau syntax css tersebut dipasang didalam syntax html berikut:
<style> ... </style>


0 comments:

Posting Komentar

Catatan Sementara

Assalamualaikum warahmatullahi wabarakatuh Bismillahirrohmanirrohim رَبَّنَا ظَلَمْنَاۤ اَنْفُسَنَا وَاِ نْ لَّمْ تَغْفِرْ لَـنَا وَتَرْحَمْنَا لَـنَكُوْنَنَّ مِنَ الْخٰسِرِيْنَ "Ya Tuhan kami, kami telah menzalimi diri kami sendiri. Jika Engkau tidak mengampuni kami dan memberi rahmat kepada kami, niscaya kami termasuk orang-orang yang rugi." (QS. Al-A'raf 7: Ayat 23). Ya Rahman ya Rahim, Jagalah kami dari neraka JahanamMu yg amat dahsyat. Sungguh, kami tidak akan mampu menjadi penghuninya, walau hanya sesaat. Yaa Aziz aku mohon , kembalikan kami smua di dlm Husnul khotimah.. Yaa ghofar ampuni dosa kedua orang tua kami , sdr2 kami serta orang2 Sholeh dan masukkan klg kami smua dlm surga-Mu . Aamiin 🤲
 
© 2021 Catatan Afandi Kusuma | www.suwur.com | Furniture.Omasae | JayaSteel | OmaSae | suwur | Galvalum | DepoAirIsiUlang | Seluruh Arsip