Cara Membuat Gambar di Tengah dengan HTML dan CSS

Jawaban cepatnya: text-align pada induk

<img> adalah elemen inline: ia berada di dalam baris teks seperti sebuah kata. Jadi kamu menengahkannya dengan cara yang sama seperti menengahkan teks, yaitu text-align: center pada induknya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center an image</title>
  <style>
    .wrap { text-align: center; border: 1px dashed #9ca3af; padding: 8px; }
  </style>
</head>
<body>
  <div class="wrap" id="wrap">
    <img id="img" width="160" height="100" alt="Blue rectangle"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100'%3E%3Crect width='160' height='100' rx='8' fill='%232563eb'/%3E%3C/svg%3E">
  </div>
</body>
</html>

Style-nya ditaruh di div, bukan di gambar. Menaruh text-align: center di <img> itu sendiri tidak berpengaruh, karena gambar tidak punya teks di dalamnya untuk diratakan.

Metode 2: display block dan margin auto

Jika kamu lebih suka memberi style pada gambarnya sendiri, ubah gambar menjadi block dan beri margin samping otomatis. Ruang kosong di kedua sisi dibagi rata:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Block and margin auto</title>
  <style>
    .centered {
      display: block;
      margin: 0 auto;
      max-width: 100%;
      height: auto;
    }
    .frame { border: 1px dashed #9ca3af; padding: 8px 0; margin-bottom: 8px; }
  </style>
</head>
<body>
  <div class="frame">
    <img class="centered" id="img" width="160" height="100" alt="Green rectangle"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100'%3E%3Crect width='160' height='100' rx='8' fill='%2316a34a'/%3E%3C/svg%3E">
  </div>
  <div class="frame">
    <img style="margin: 0 auto;" id="inline" width="160" height="100" alt="Gray rectangle"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100'%3E%3Crect width='160' height='100' rx='8' fill='%239ca3af'/%3E%3C/svg%3E">
  </div>
</body>
</html>

Gambar abu-abu punya margin: 0 auto tetapi tetap di awal baris: margin auto tidak berpengaruh pada elemen inline. display: block adalah bagian yang kurang. max-width: 100% bersama height: auto menjaga gambar agar tidak meluber di layar yang sempit sambil mempertahankan proporsinya.

Metode 3: flexbox atau grid, termasuk penengahan vertikal

Untuk menengahkan gambar ke dua arah di dalam kotak, beri kotak itu sebuah tinggi lalu tengahkan isinya dengan grid atau flexbox:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center vertically</title>
  <style>
    .box {
      display: grid;
      place-items: center;
      height: 220px;
      background: #f3f4f6;
      border: 1px solid #d1d5db;
    }
  </style>
</head>
<body>
  <div class="box" id="box">
    <img id="img" width="120" height="120" alt="Amber circle"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ccircle cx='60' cy='60' r='60' fill='%23f59e0b'/%3E%3C/svg%3E">
  </div>
</body>
</html>

Padanan flexbox-nya adalah display: flex; justify-content: center; align-items: center;. Dengan cara mana pun, kotaknya butuh tinggi yang lebih besar dari gambar, kalau tidak, tidak ada ruang untuk menengahkan. Metode yang sama bisa menengahkan elemen apa pun; halaman membuat div di tengah membandingkan semuanya.

Menengahkan gambar dengan caption

Foto dengan caption sebaiknya ditaruh di <figure>. Tengahkan isi figure, dan gambar beserta caption-nya akan sejajar bersama:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Figure</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    figure {
      margin: 0;
      text-align: center;
    }
    figure img { max-width: 100%; height: auto; }
    figcaption { font-size: 14px; color: #4b5563; margin-top: 6px; }
  </style>
</head>
<body>
  <figure id="fig">
    <img id="img" width="200" height="120" alt="A mountain drawing"
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='120'%3E%3Crect width='200' height='120' fill='%23bfdbfe'/%3E%3Cpath d='M0 120L70 40L140 120Z' fill='%2316a34a'/%3E%3Cpath d='M80 120L150 55L200 100V120Z' fill='%2315803d'/%3E%3C/svg%3E">
    <figcaption id="cap">Figure 1. A centered image with its caption.</figcaption>
  </figure>
</body>
</html>

Beberapa gambar dalam satu baris di tengah

Sederet logo atau thumbnail adalah pekerjaan untuk flexbox. justify-content: center menengahkan kelompoknya, gap memberi jarak, dan flex-wrap membuatnya turun ke baris berikutnya di layar kecil sambil tetap di tengah:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Centered row</title>
  <style>
    .row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 12px;
      padding: 12px;
      border: 1px dashed #9ca3af;
    }
  </style>
</head>
<body>
  <div class="row" id="row">
    <img width="80" height="50" alt="Logo one" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='50'%3E%3Crect width='80' height='50' rx='6' fill='%232563eb'/%3E%3C/svg%3E">
    <img width="80" height="50" alt="Logo two" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='50'%3E%3Crect width='80' height='50' rx='6' fill='%2316a34a'/%3E%3C/svg%3E">
    <img width="80" height="50" alt="Logo three" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='50'%3E%3Crect width='80' height='50' rx='6' fill='%23f59e0b'/%3E%3C/svg%3E">
  </div>
</body>
</html>

Metode mana yang dipakai

Cara lama, dan kenapa jangan

Kamu masih akan menemukan cara-cara ini di tutorial lama:

<!-- obsolete: do not use -->
<center><img src="logo.png" alt="Logo"></center>
<img src="logo.png" alt="Logo" align="center">

<center> dan atribut align sudah dihapus dari HTML. Browser masih menampilkan <center> demi kompatibilitas, dan align="center" pada gambar bahkan tidak menengahkannya secara horizontal: browser memperlakukannya sebagai perataan vertikal di dalam baris. Pakai salah satu metode CSS di atas.

Kesalahan umum

• text-align: center pada <img>. Taruh di induknya.
• margin: 0 auto pada gambar inline. Tambahkan display: block.
• Penengahan vertikal tanpa tinggi pada induk. Kotaknya menyusut seukuran gambar, sehingga tidak ada ruang untuk menengahkan.
• float: center. Nilai itu tidak ada. Float hanya bisa ke salah satu sisi.
• Lupa alt. Gambar yang ditengahkan tetap butuh teks alt; pakai alt="" hanya untuk gambar yang murni dekoratif.
• Gambar yang tertarik. Mengatur width dan height di CSS dengan rasio yang berbeda membuatnya terdistorsi. Atur salah satunya dan pakai height: auto, atau tambahkan object-fit: cover.