Ausführbare CSS-Docs: Bild zentrieren

Q: Wie zentriere ich ein Bild in HTML?

Setz text-align: center an das Element, das es enthält, zum Beispiel . Ein Bild ist standardmäßig inline und wird deshalb wie ein Wort im Text zentriert.

Q: Wie zentriere ich ein Bild mit margin auto?

Mach das Bild zuerst zu einem Block: img { display: block; margin: 0 auto; }. Auto-Margins zentrieren keine Inline-Elemente, und ein Bild ist inline, bis du das änderst.

Q: Kann ich den Tag oder align="center" nutzen, um ein Bild zu zentrieren?

Nein. und das Attribut align an sind in HTML5 veraltet. Browser stellen für alte Seiten noch dar, aber align="center" an einem Bild richtet es vertikal in der Zeile aus, nicht horizontal. Nimm CSS.

Die schnelle Antwort: text-align am Elternelement

Ein <img> ist ein Inline-Element: Es steht in einer Textzeile wie ein Wort. Also zentrierst du es genauso wie Text, mit text-align: center am Elternelement:

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

Der Style gehört an das div, nicht an das Bild. text-align: center am <img> selbst bewirkt nichts, weil das Bild keinen Text enthält, der ausgerichtet werden könnte.

Methode 2: display block und margin auto

Willst du lieber das Bild selbst stylen, mach es zu einem Block und gib ihm automatische seitliche Margins. Der freie Platz wird gleichmäßig auf beide Seiten verteilt:

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

Das graue Bild hat margin: 0 auto, bleibt aber am Zeilenanfang: Auto-Margins bewirken an einem Inline-Element nichts. display: block ist das fehlende Stück. max-width: 100% mit height: auto verhindert, dass das Bild auf einem schmalen Bildschirm überläuft, und erhält seine Proportionen.

Methode 3: Flexbox oder Grid, auch vertikal

Um ein Bild in einer Box in beide Richtungen zu zentrieren, gib der Box eine Höhe und zentriere ihren Inhalt mit Grid oder 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>

Das Flexbox-Gegenstück ist display: flex; justify-content: center; align-items: center;. In beiden Fällen braucht die Box eine Höhe, die größer als das Bild ist, sonst gibt es keinen Platz zum Zentrieren. Dieselben Methoden zentrieren jedes Element; die Seite div zentrieren vergleicht sie alle.

Ein Bild mit Bildunterschrift zentrieren

Ein Foto mit Bildunterschrift gehört in ein <figure>. Zentriere den Inhalt des figure, und Bild und Bildunterschrift stehen gemeinsam in einer Linie:

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

Mehrere Bilder in einer zentrierten Reihe

Eine Reihe von Logos oder Vorschaubildern ist ein Fall für Flexbox. justify-content: center zentriert die Gruppe, gap setzt die Abstände, und flex-wrap lässt sie auf kleinen Bildschirmen umbrechen, während sie zentriert bleibt:

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

Welche Methode du nimmst

Situation	Nimm
Ein Bild in einem Absatz oder einem einfachen Block	`text-align: center` am Elternelement
Du kannst nur das Bild stylen	`display: block; margin: 0 auto;`
In beide Richtungen in einer Box zentrieren	Grid `place-items: center` (oder Flexbox) an der Box
Eine Reihe von Bildern	Flexbox mit `justify-content: center`
Ein Bild mit Bildunterschrift	`<figure>` mit `text-align: center`
Ein Hintergrundbild, kein Inhalt	`background-position: center`, siehe background-image

Die alten Wege, und warum nicht

In alten Tutorials findest du noch diese:

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

<center> und das Attribut align wurden aus HTML entfernt. Browser stellen <center> aus Gründen der Abwärtskompatibilität noch dar, und align="center" an einem Bild zentriert es nicht einmal horizontal: Browser behandeln es als vertikale Ausrichtung in der Zeile. Nimm eine der CSS-Methoden oben.

Häufige Fehler

text-align: center am <img>. Setz es an das Elternelement.
margin: 0 auto an einem Inline-Bild. Füge display: block hinzu.
Vertikal zentrieren ohne Höhe am Elternelement. Die Box schrumpft auf das Bild, und es bleibt kein Platz zum Zentrieren.
float: center. Diesen Wert gibt es nicht. Floats gehen nur an eine Seite.
alt vergessen. Auch ein zentriertes Bild braucht einen Alternativtext; nimm alt="" nur für rein dekorative Bilder.
Ein verzerrtes Bild. Setzt du width und height in CSS auf Werte mit anderem Seitenverhältnis, wird es verzerrt. Setz nur einen Wert und nimm height: auto, oder ergänze object-fit: cover.

Häufig gestellte Fragen

Wie zentriere ich ein Bild in HTML?

Setz text-align: center an das Element, das es enthält, zum Beispiel <p style="text-align: center;"><img src="logo.png" alt="Logo"></p>. Ein Bild ist standardmäßig inline und wird deshalb wie ein Wort im Text zentriert.

Wie zentriere ich ein Bild mit margin auto?

Mach das Bild zuerst zu einem Block: img { display: block; margin: 0 auto; }. Auto-Margins zentrieren keine Inline-Elemente, und ein Bild ist inline, bis du das änderst.

Wie zentriere ich ein Bild vertikal und horizontal?

Mach seinen Container zu einem Grid (oder Flexbox) mit einer Höhe: .box { display: grid; place-items: center; height: 300px; }. Das Bild sitzt dann in der Mitte der Box.

Kann ich den Tag <center> oder align="center" nutzen, um ein Bild zu zentrieren?

Nein. <center> und das Attribut align an <img> sind in HTML5 veraltet. Browser stellen <center> für alte Seiten noch dar, aber align="center" an einem Bild richtet es vertikal in der Zeile aus, nicht horizontal. Nimm CSS.

Warum ist unter meinem zentrierten Bild eine kleine Lücke?

Ein Inline-Bild sitzt auf der Grundlinie des Textes und lässt darunter Platz für Unterlängen von Buchstaben. Setz display: block am Bild oder vertical-align: middle, und die Lücke verschwindet.

Verwandte Konzepte