Resmi ortalamak için etiketi ya da align="center" kullanılabilir mi?

Hayır. ve üzerindeki align özniteliği HTML5'te kullanımdan kalkmıştır. Tarayıcılar eski sayfalar için 'ı hâlâ çizer, ama bir resimdeki align="center" onu yatayda değil satır içinde dikeyde hizalar. CSS kullan.

Çalıştırılabilir CSS Dokümanları: Resim ortalama

Q: HTML'de resim nasıl ortalanır?

Onu içeren elemente text-align: center ver, örneğin . Bir resim varsayılan olarak satır içidir, bu yüzden metnin bir kelimesi gibi ortalanır.

Q: margin auto ile resim nasıl ortalanır?

Önce resmi blok yap: img { display: block; margin: 0 auto; }. Otomatik margin'ler satır içi elementleri ortalamaz ve bir resim sen değiştirene kadar satır içidir.

Hızlı cevap: ebeveynde text-align

Bir <img> satır içi bir elementtir: bir metin satırında bir kelime gibi durur. Bu yüzden onu metni ortaladığın gibi, ebeveynine text-align: center vererek ortalarsın:

<!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>

Stil resme değil, div'e verilir. text-align: center'ı <img>'nin kendisine vermek hiçbir şey yapmaz, çünkü resmin içinde hizalanacak metin yoktur.

Yöntem 2: display block ve margin auto

Resmin kendisine stil vermeyi tercih ediyorsan onu bir bloğa çevir ve otomatik yan margin'ler ver. İki taraftaki boş alan eşit paylaştırılır:

<!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>

Gri resimde margin: 0 auto var ama satırın başında kalıyor: otomatik margin'ler satır içi bir elementte hiçbir şey yapmaz. Eksik parça display: block'tur. height: auto ile birlikte max-width: 100% resmin oranlarını koruyarak dar bir ekrandan taşmasını önler.

Yöntem 3: dikey ortalama dahil flexbox ya da grid

Bir resmi bir kutunun içinde iki yönde de ortalamak için kutuya bir yükseklik ver ve içeriğini grid ya da flexbox ile ortala:

<!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>

Flexbox karşılığı display: flex; justify-content: center; align-items: center; şeklindedir. İki durumda da kutunun yüksekliği resimden büyük olmalıdır, yoksa ortalanacak boşluk olmaz. Aynı yöntemler her elementi ortalar; div ortalama sayfası hepsini karşılaştırıyor.

Altyazılı bir resmi ortalamak

Altyazılı bir fotoğrafın yeri bir <figure>'dır. Figure'ın içeriğini ortala, resim ve altyazı birlikte hizalanır:

<!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>

Ortalanmış bir satırda birkaç resim

Bir logo ya da küçük resim satırı flexbox işidir. justify-content: center grubu ortalar, gap aralarını açar ve flex-wrap onun küçük ekranlarda ortalanmış kalarak alt satıra geçmesine izin verir:

<!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>

Hangi yöntemi kullanmalı

Durum	Kullan
Bir paragraftaki ya da basit bir bloktaki resim	Ebeveynde `text-align: center`
Yalnızca resme stil verebiliyorsun	`display: block; margin: 0 auto;`
Bir kutunun içinde iki yönde ortalamak	Kutuda grid `place-items: center` (ya da flexbox)
Bir resim satırı	`justify-content: center` ile flexbox
Altyazılı bir resim	`text-align: center` ile `<figure>`
İçerik değil, bir arka plan resmi	`background-position: center`, bkz. background-image

Eski yollar ve neden kullanılmamalı

Eski eğitimlerde bunları hâlâ bulursun:

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

<center> ve align özniteliği HTML'den çıkarıldı. Tarayıcılar geriye uyumluluk için <center>'ı hâlâ çizer; bir resimdeki align="center" ise onu yatayda bile ortalamaz: tarayıcılar onu satır içinde dikey bir hizalama olarak ele alır. Yukarıdaki CSS yöntemlerinden birini kullan.

Sık yapılan hatalar

<img> üzerinde text-align: center. Onu ebeveyne ver.
Satır içi bir resimde margin: 0 auto. display: block ekle.
Ebeveynde yükseklik olmadan dikey ortalama. Kutu resme göre küçülür ve ortalanacak boşluk kalmaz.
float: center. Böyle bir değer yoktur. Float'lar yalnızca bir tarafa gider.
alt'ı unutmak. Ortalanmış bir resmin de alt metne ihtiyacı vardır; alt=""'ı yalnızca tamamen dekoratif resimler için kullan.
Gerilmiş bir resim. CSS'te hem width hem height değerlerini farklı bir orana sahip değerlere ayarlamak onu bozar. Birini ayarla ve height: auto kullan ya da object-fit: cover ekle.

Sıkça Sorulan Sorular

HTML'de resim nasıl ortalanır?

Onu içeren elemente text-align: center ver, örneğin <p style="text-align: center;"><img src="logo.png" alt="Logo"></p>. Bir resim varsayılan olarak satır içidir, bu yüzden metnin bir kelimesi gibi ortalanır.

margin auto ile resim nasıl ortalanır?

Önce resmi blok yap: img { display: block; margin: 0 auto; }. Otomatik margin'ler satır içi elementleri ortalamaz ve bir resim sen değiştirene kadar satır içidir.

Bir resim hem dikeyde hem yatayda nasıl ortalanır?

Kapsayıcısını yüksekliği olan bir grid (ya da flexbox) yap: .box { display: grid; place-items: center; height: 300px; }. Resim bu durumda kutunun tam ortasına oturur.

Resmi ortalamak için <center> etiketi ya da align="center" kullanılabilir mi?

Hayır. <center> ve <img> üzerindeki align özniteliği HTML5'te kullanımdan kalkmıştır. Tarayıcılar eski sayfalar için <center>'ı hâlâ çizer, ama bir resimdeki align="center" onu yatayda değil satır içinde dikeyde hizalar. CSS kullan.

Ortalanmış resmimin altında neden küçük bir boşluk var?

Satır içi bir resim metnin taban çizgisine oturur ve altında aşağı sarkan harfler için yer bırakır. Resme display: block ya da vertical-align: middle ver, boşluk kaybolur.

İlgili kavramlar