Czy mogę użyć znacznika albo align="center" do wyśrodkowania obrazka?

Nie. i atrybut align na są w HTML5 przestarzałe. Przeglądarki nadal renderują na starych stronach, ale align="center" na obrazku wyrównuje go w pionie w linii, a nie w poziomie. Użyj CSS.

Jak wyśrodkować obrazek w HTML i CSS

Q: Jak wyśrodkować obrazek w HTML?

Ustaw text-align: center na elemencie, który go zawiera, na przykład . Obrazek jest domyślnie elementem liniowym, więc wyśrodkowuje się jak słowo w tekście.

Q: Jak wyśrodkować obrazek przez margin auto?

Najpierw zamień obrazek w blok: img { display: block; margin: 0 auto; }. Automatyczne marginesy nie wyśrodkowują elementów liniowych, a obrazek jest liniowy, dopóki tego nie zmienisz.

Q: Jak wyśrodkować obrazek w pionie i w poziomie?

Zamień jego kontener w grid (albo flexbox) z wysokością: .box { display: grid; place-items: center; height: 300px; }. Obrazek znajdzie się wtedy na środku pudełka.

Szybka odpowiedź: text-align na rodzicu

<img> jest elementem liniowym: stoi w linii tekstu jak słowo. Wyśrodkowujesz go więc tak samo jak tekst, przez text-align: center na rodzicu:

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

Styl trafia na div, a nie na obrazek. text-align: center na samym <img> nic nie daje, bo obrazek nie ma w środku tekstu do wyrównania.

Metoda 2: display block i margin auto

Jeśli wolisz stylować sam obrazek, zamień go w blok i nadaj mu automatyczne marginesy boczne. Wolne miejsce po obu stronach dzieli się po równo:

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

Szary obrazek ma margin: 0 auto, ale zostaje na początku linii: automatyczne marginesy nic nie robią na elemencie liniowym. Brakującym elementem jest display: block. max-width: 100% razem z height: auto nie pozwala obrazkowi wyjść poza wąski ekran i zachowuje jego proporcje.

Metoda 3: flexbox albo grid, także w pionie

Żeby wyśrodkować obrazek w obu kierunkach w pudełku, nadaj pudełku wysokość i wyśrodkuj jego zawartość gridem albo flexboxem:

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

Odpowiednik we flexboxie to display: flex; justify-content: center; align-items: center;. W obu przypadkach pudełko musi być wyższe niż obrazek, bo inaczej nie ma miejsca do wyśrodkowania. Te same metody wyśrodkowują dowolny element; porównuje je wszystkie strona o wyśrodkowaniu diva.

Wyśrodkowanie obrazka z podpisem

Zdjęcie z podpisem powinno być w <figure>. Wyśrodkuj zawartość figury, a obrazek i podpis ustawią się razem:

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

Kilka obrazków w wyśrodkowanym rzędzie

Rząd logo albo miniatur to zadanie dla flexboxa. justify-content: center wyśrodkowuje grupę, gap rozsuwa elementy, a flex-wrap pozwala im zawijać się na małych ekranach i nadal pozostać na środku:

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

Której metody użyć

Sytuacja	Użyj
Obrazek w akapicie albo prostym bloku	`text-align: center` na rodzicu
Możesz stylować tylko obrazek	`display: block; margin: 0 auto;`
Wyśrodkowanie w obu kierunkach w pudełku	Grid `place-items: center` (albo flexbox) na pudełku
Rząd obrazków	Flexbox z `justify-content: center`
Obrazek z podpisem	`<figure>` z `text-align: center`
Obraz w tle, a nie treść	`background-position: center`, zobacz background-image

Stare sposoby i dlaczego nie

Wciąż znajdziesz je w starych poradnikach:

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

<center> i atrybut align zostały usunięte z HTML. Przeglądarki nadal renderują <center> ze względu na zgodność wsteczną, a align="center" na obrazku nawet nie wyśrodkowuje go w poziomie: przeglądarki traktują to jako wyrównanie w pionie w obrębie linii. Użyj jednej z metod CSS opisanych wyżej.

Częste błędy

text-align: center na <img>. Ustaw to na rodzicu.
margin: 0 auto na obrazku liniowym. Dodaj display: block.
Wyśrodkowanie w pionie bez wysokości rodzica. Pudełko kurczy się do obrazka i nie zostaje miejsce do wyśrodkowania.
float: center. Nie ma takiej wartości. Float działa tylko w stronę boku.
Brak alt. Wyśrodkowany obrazek nadal potrzebuje tekstu alternatywnego; alt="" stosuj tylko dla obrazków czysto dekoracyjnych.
Rozciągnięty obrazek. Ustawienie w CSS zarówno width, jak i height na wartości o innych proporcjach go zniekształca. Ustaw jedną z nich i użyj height: auto albo dodaj object-fit: cover.

Najczęściej zadawane pytania

Jak wyśrodkować obrazek w HTML?

Ustaw text-align: center na elemencie, który go zawiera, na przykład <p style="text-align: center;"><img src="logo.png" alt="Logo"></p>. Obrazek jest domyślnie elementem liniowym, więc wyśrodkowuje się jak słowo w tekście.

Jak wyśrodkować obrazek przez margin auto?

Najpierw zamień obrazek w blok: img { display: block; margin: 0 auto; }. Automatyczne marginesy nie wyśrodkowują elementów liniowych, a obrazek jest liniowy, dopóki tego nie zmienisz.

Jak wyśrodkować obrazek w pionie i w poziomie?

Zamień jego kontener w grid (albo flexbox) z wysokością: .box { display: grid; place-items: center; height: 300px; }. Obrazek znajdzie się wtedy na środku pudełka.

Czy mogę użyć znacznika <center> albo align="center" do wyśrodkowania obrazka?

Nie. <center> i atrybut align na <img> są w HTML5 przestarzałe. Przeglądarki nadal renderują <center> na starych stronach, ale align="center" na obrazku wyrównuje go w pionie w linii, a nie w poziomie. Użyj CSS.

Skąd mała szczelina pod wyśrodkowanym obrazkiem?

Obrazek liniowy stoi na linii bazowej tekstu i zostawia pod sobą miejsce na dolne wydłużenia liter. Ustaw na obrazku display: block albo vertical-align: middle, a szczelina zniknie.

Powiązane zagadnienia