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>