Wichtigste Erkenntnisse
- Verwenden Sie margin-inline: auto bei einem Bild auf Blockebene mit begrenzter Breite.
- Verwenden Sie text-align: center beim Elternelement, wenn sich das Bild bewusst wie Inline-Inhalt verhalten soll.
- Verwenden Sie Flexbox für die Ausrichtung in einer einzigen Dimension neben Bildunterschriften, Bedienelementen oder Geschwisterelementen.
Die richtige Zentrierungsmethode hängt davon ab, ob ein Bild Inline-Inhalt, ein Block, ein Element in einem Layout-Container oder ein Beschnitt innerhalb eines festen Rahmens ist. Die kleinste CSS-Regel, die zu dieser Rolle passt, ist meist die robusteste.
Worauf es besonders ankommt
- Verwenden Sie place-items: center im Grid, wenn beide Achsen innerhalb eines definierten Bereichs eine Rolle spielen.
- Verwenden Sie object-fit und object-position, wenn Sie die Pixel innerhalb einer festen Bild-Box zentrieren und nicht das Element selbst.
Ermitteln, was zentriert werden muss
Zentrieren kann sich auf das Bildelement innerhalb seines Elternelements beziehen, auf die Pixel innerhalb einer festen Bild-Box oder auf eine ganze Gruppe aus Bild, Bildunterschrift und Bedienelementen. Das sind unterschiedliche Layout-Probleme. Bestimmen Sie das Ziel und die relevante horizontale oder vertikale Achse, bevor Sie CSS auswählen.
Setzen Sie zuerst auf semantisches Markup. Ein Bild mit Bildunterschrift gehört oft in figure und figcaption, während ein verlinktes Bild in ein Anchor-Element mit einem sinnvollen zugänglichen Namen gehört. CSS sollte diese Struktur anordnen, statt leere Wrapper-Elemente allein dafür einzuführen, obsolete Ausrichtungsattribute nachzuahmen.
Elementzentrierung
Verschiebt die Box des img-Elements relativ zu ihrem umschließenden Block.
Inhaltszentrierung
Verwendet object-position, um die gerenderten Pixel innerhalb der Box eines img-Elements zu verschieben, wenn Beschnitt oder freier Raum vorhanden ist.
Inline-Bilder mit dem Elternelement zentrieren
Ein img-Element verhält sich standardmäßig wie Inline-Inhalt. Wenn dieses Verhalten beabsichtigt ist, wenden Sie text-align: center auf sein Elternelement an. Die Regel zentriert alle Inline-Inhalte in diesem Formatierungskontext, einschließlich Text und anderer Inline-Elemente. Beschränken Sie sie deshalb auf einen Container, dessen gesamter Inhalt diese Ausrichtung teilen soll.
Inline-Bilder richten sich standardmäßig an der Textbasislinie aus, wodurch darunter sichtbarer Freiraum entstehen kann. Diese Lücke ist kein Außenabstand. Setzen Sie display: block, wenn das Bild nicht Teil einer Zeile sein soll, oder passen Sie vertical-align an, wenn es inline bleiben soll. Testen Sie den umliegenden Text, denn eine geänderte Ausrichtung kann die gesamte Zeilenbox beeinflussen.
Gut geeignet
Verwenden Sie diese Methode für einen einfachen Fließtext- oder Figure-Container, in dem alle Inline-Inhalte zentriert werden sollen.
Häufiger Fehler
Wird text-align direkt auf das img angewendet, zentriert die Regel das img nicht, denn die Eigenschaft richtet Inline-Kindelemente aus und nicht das Element selbst.
Ein Block-Bild mit logischen Außenabständen zentrieren
Für ein eigenständiges Bild sind display: block und margin-inline: auto meist die kleinste zuverlässige Regel. Automatische Inline-Außenabstände teilen den verbleibenden horizontalen Raum gleichmäßig auf. Der Browser benötigt eine verwendete Bildbreite, die kleiner als der Container ist; geben Sie dem Bild daher eine intrinsische Breite oder eine CSS-Breite und begrenzen Sie diese mit max-inline-size: 100%.
Logische Eigenschaften funktionieren in Schreibrichtungen von links nach rechts und von rechts nach links, ohne separate Deklarationen für links und rechts. Diese Technik zentriert horizontal, jedoch nicht vertikal. Sie kann außerdem keine sichtbare Verschiebung bewirken, wenn das Bild den gesamten Container bereits ausfüllt, weil dann kein verbleibender Inline-Raum vorhanden ist.
<img class="article-image" src="diagram.webp" alt="Request flow through three services" width="960" height="540" />
<style>
.article-image {
display: block;
inline-size: min(100%, 60rem);
block-size: auto;
margin-inline: auto;
}
</style>Abmessungen erhalten
Geben Sie die Attribute width und height an, um das korrekte Seitenverhältnis zu reservieren, bevor die Datei geladen wird.
Festen Überlauf vermeiden
Kombinieren Sie eine gewünschte Breite mit max-inline-size: 100%, damit schmale Viewports das Bild verkleinern können.
Flexbox für Komponentenlayout in einer einzigen Dimension verwenden
Flexbox eignet sich, wenn ein Bild zusammen mit Bildunterschriften, Buttons, Badges oder benachbarten Bildern entlang einer Hauptachse angeordnet wird. Bei der voreingestellten Zeilenrichtung zentriert justify-content entlang der horizontalen Hauptachse und align-items entlang der vertikalen Querachse. Wechselt flex-direction zu column, tauschen diese Zuständigkeiten.
Ein einzelnes Bild mit Flexbox zu zentrieren funktioniert, doch setzen Sie es ein, weil die umgebende Komponente von einem Flex-Layout profitiert, und nicht bloß, weil es vertraut ist. Entscheiden Sie, ob Elemente umbrechen dürfen, wie sich Abstände verhalten und was geschehen soll, wenn übersetzter Text oder eine große, von der Person gewählte Schrift den Inhalt höher werden lässt als erwartet.
.figure-row {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
min-block-size: 20rem;
}Mehrere Bilder
Verwenden Sie flex-wrap und gap für eine zentrierte Zeile, die Elemente ohne Überlauf in neue Zeilen umbrechen kann.
Vorsicht in der Vertikalen
Vertikale Zentrierung benötigt verfügbaren Raum auf der Blockachse; ein Container ohne definierte oder minimale Höhe hat keinen freien Raum zum Verteilen.
Grid verwenden, wenn beide Achsen oder Tracks relevant sind
Grid eignet sich zum Zentrieren innerhalb eines definierten zweidimensionalen Bereichs. place-items: center kombiniert align-items und justify-items und zentriert das Grid-Element auf beiden Achsen. Besonders klar ist das bei Medienrahmen, leeren Zuständen oder Overlays, in denen das Bild eine Grid-Zelle einnimmt.
Grid zentriert das Element, nicht die Pixel darin. Füllt das img den Grid-Bereich aus und werden seine Pixel durch object-fit beschnitten, steuern Sie den internen Ausschnitt mit object-position. Definieren Sie für Galerien responsive Tracks und Abstände explizit, damit das Zentrieren keine unvorhersehbaren Spaltenbreiten oder Lesereihenfolgen erzeugt.
Overlay-Muster
Platzieren Sie ein Bild und Bedienelemente im selben Grid-Bereich, wenn sie ohne absolute Positionierung ausgerichtet werden müssen.
Lesereihenfolge
Halten Sie die DOM-Reihenfolge logisch, denn die visuelle Grid-Platzierung sollte keine verwirrende Tastatur- oder Screenreader-Abfolge erzeugen.
Pixel mit object-fit und object-position zentrieren
Ein fester Bildrahmen muss unter Umständen Quellen mit unterschiedlichen Seitenverhältnissen darstellen. object-fit: cover füllt den Rahmen, behält dabei das Seitenverhältnis bei und schneidet überschüssige Pixel ab. object-fit: contain erhält das gesamte Bild und kann ungenutzten Raum hinterlassen. object-position hat standardmäßig den Wert 50% 50% und zentriert damit die gerenderten Pixel innerhalb der img-Box.
Diese Methode zentriert nicht das img-Element selbst. Sie verändert, wie ersetzte Inhalte innerhalb dieses Elements eingepasst werden. Wenn es darauf ankommt, ein Gesicht, ein Produkt oder ein Diagramm zu erhalten, legen Sie eine bewusste Fokusposition fest oder verwenden Sie einen separat vorbereiteten Zuschnitt. Eine Zentrierung ist ein neutraler Standardwert und kein Nachweis dafür, dass der wichtige Bildinhalt erhalten geblieben ist.
Verzerrung vermeiden
Vermeiden Sie es, width und height ohne object-fit zu erzwingen, wenn das Zielseitenverhältnis vom Seitenverhältnis der Quelle abweicht.
Rahmen-Fallback bereitstellen
Legen Sie für Bildboxen mit contain eine Hintergrundfarbe fest, damit transparente oder ungenutzte Bereiche bewusst gestaltet wirken.
Vorverarbeitung und Layout getrennt halten
Für die Zentrierung sollte weiterhin CSS zuständig bleiben. Serverseitige Verarbeitung ist sinnvoll, wenn hochgeladene Dateien mit riesigen Abmessungen, uneinheitlicher Ausrichtung, ungeeigneten Formaten oder übermäßiger Dateigröße eintreffen. Das Normalisieren dieser Eigenschaften kann Übertragungs- und Decodierungsaufwand verringern, ersetzt aber weder Block-Außenabstände noch Flexbox, Grid oder Objektpositionierung.
In einem Workflow, der hochgeladene Medien verarbeitet, kann eine Backend-Bildbibliothek oder ein Derivat-Dienst Ausgaben mit begrenzter oder exakter Größe erzeugen. Erhalten Sie das gesamte Bild, wenn jeder Rand zählt, und verwenden Sie einen freigegebenen Zuschnitt nur dann, wenn Beschneiden akzeptabel ist. Bewahren Sie das Original unter geeigneten Zugriffskontrollen auf, veröffentlichen Sie nur die erforderlichen Derivate, und gehen Sie nie davon aus, dass ein geometrisch zentrierter Zuschnitt die Bedeutung erhält.
Kostengrenze
Erzeugen Sie keine neuen Derivate, nur um ein CSS-Ausrichtungsproblem zu lösen.
Sicherheitsgrenze
Validieren Sie Upload-Limits und halten Sie Zugangsdaten für die Verarbeitung außerhalb des Browsers, unabhängig von der Zentrierungstechnik.
Inhaltsextreme und Fehlerzustände testen
Testen Sie hochformatige, querformatige, quadratische, ungewöhnlich kleine, transparente und fehlende Bilder. Ändern Sie die Größe des Viewports, zoomen Sie den Text, wechseln Sie die Schreibrichtung, sofern unterstützt, und verwenden Sie lange übersetzte Bildunterschriften. Prüfen Sie, ob das Bild sichtbar bleibt, nicht überläuft und keine Bedienelemente überlappt oder Fokusindikatoren verdeckt.
Prüfen Sie mit den Entwicklertools des Browsers den display-Wert des img-Elements, seine verwendete Breite, den Formatierungskontext des Elternelements und die geerbten Regeln. Viele Zentrierungsprobleme entstehen durch ein Bild in voller Breite, ein unerwartetes Layout des Elternelements, einen widersprüchlichen Außenabstand oder einen Container ohne Höhe. Ergänzen Sie verhaltensorientierte Tests für zugängliche Namen und sichtbare Inhalte und beschränken Sie die visuelle Prüfung auf die Zuschnittqualität.
Verhalten bei fehlender Datei
Geben Sie für bedeutungstragende Bilder nützlichen Alternativtext an und stellen Sie sicher, dass eine fehlgeschlagene Anfrage die Komponente nicht in sich zusammenfallen lässt oder beschädigt.
Layout-Stabilität
Intrinsische Breite und Höhe ermöglichen es dem Browser, Platz zu reservieren, bevor das Bild heruntergeladen wird.
Wissenswerte technische Details
- Automatische Inline-Außenabstände zentrieren einen Block nur dann, wenn der Browser den verbleibenden Platz berechnen kann; das Bild benötigt also eine verwendete Breite, die kleiner ist als sein umschließender Block.
- Inline-Bilder sind Teil einer Textzeile und richten sich standardmäßig an der Grundlinie aus, wodurch unterhalb des Bildes scheinbarer Freiraum entstehen kann, der weder durch Außenabstände noch durch Innenabstände verursacht wird.
- object-position hat den Standardwert 50% 50%. Die Eigenschaft verschiebt ersetzten Inhalt innerhalb seiner Box und bleibt wirkungslos, sofern nicht object-fit oder voneinander abweichende intrinsische und gerenderte Abmessungen freien oder beschnittenen Raum erzeugen.
- In Flexbox steuert align-items die Querachse und justify-content die Hauptachse; welche Eigenschaft ein Bild zentriert, hängt daher von flex-direction ab.
- Im Grid ist place-items die Kurzschreibweise für align-items und justify-items; es zentriert das Grid-Element, statt zu ändern, wie die Pixel innerhalb des Bildelements eingepasst werden.
- Logische Eigenschaften wie margin-inline passen sich Schreibrichtungen von links nach rechts und von rechts nach links an; das Zentrieren mit zwei automatischen Außenabständen verhält sich mit physischen Außenabständen identisch, asymmetrische Werte für margin-left und margin-right passen sich jedoch nicht an.
Ein praxisnaher Ansatz
- 1
Bestimmen Sie, ob die Anforderung das Element, seine Pixel oder beides betrifft.
- 2
Geben Sie dem Bild eine intrinsische Breite und Höhe und begrenzen Sie es mit max-inline-size: 100%.
- 3
Wählen Sie das Layout-Primitiv, das die umgebende Komponente bereits verwendet.
- 4
Testen Sie schmale Bildschirme, ungewöhnlich hohe Assets, fehlende Bilder und übersetzte Bildunterschriften.
Architekturgrenze
Das Zentrieren von Bildern ist eine Layout-Aufgabe, die von CSS übernommen wird. Serverseitige Bildverarbeitung kann Abmessungen, Ausrichtung, Format und Dateigröße vor der Auslieferung normalisieren, ersetzt aber nicht Flexbox, Grid oder die Dokumentsemantik.
Häufig gestellte Fragen
Kann ich ein Bild ohne Wrapper-Element zentrieren?
Ja. Machen Sie das Bild zu einem Block, geben Sie ihm eine Breite, die kleiner ist als sein umschließender Block, und verwenden Sie margin-inline: auto. Ein Wrapper ist nur nötig, wenn das umgebende Layout oder die Semantik einen erfordert.
Wie zentriere ich mehrere Bilder in einer Reihe?
Verwenden Sie einen Flex-Container mit justify-content: center, gap und flex-wrap, wenn sich die Reihe an schmale Bildschirme anpassen muss. Grid ist besser, wenn die Galerie definierte Spalten und eine Ausrichtung in zwei Dimensionen benötigt.
Warum scheint margin-inline: auto nichts zu bewirken?
Das Bild ist möglicherweise weiterhin inline, nimmt eventuell die volle Containerbreite ein oder hat widersprüchliche Margins. Automatische Margins benötigen eine Box auf Blockebene mit verbleibendem Inline-Raum, der verteilt werden kann.
Was ist der Unterschied zwischen dem Zentrieren eines Bildes und der Verwendung von object-position?
Layout-Eigenschaften verschieben das img-Element innerhalb seines Elternelements. object-position verschiebt die gerenderten Pixel innerhalb des img-Elements, wenn object-fit und abweichende Seitenverhältnisse zu Beschnitt oder freiem Raum führen.
Kann die Vorverarbeitung ein Bild auf einer Webseite zentrieren?
Nein. Die Vorverarbeitung kann Abmessungen und Ausrichtung normalisieren oder die zugrunde liegende Datei beschneiden, aber CSS steuert weiterhin, wo das Bildelement erscheint und wie seine Pixel in die gerenderte Box passen. Halten Sie diese Zuständigkeiten getrennt, damit das Layout responsiv bleibt.