Bei 100 % Zoom erscheinen die Bilder außermittig, beim Vergrößern jedoch zentriert ⇐ HTML

[Anonymous]

Ich habe ein seltsames Problem, wenn es darum geht, ein Bild innerhalb eines Div zu zentrieren, wobei das Bild bei 100 % Zoom (Standard) außermittig erscheint, obwohl es zentriert erscheint, wenn ich weit genug hineinzoome. So sieht es aus.


Container bei 100 % Zoom


Container bei 500 % Zoom
Ich verwende hier einen schwarzen Kreis, damit er deutlich sichtbar ist, aber in Wirklichkeit brauche ich diesen Platz, um verschiedene Bilder aufnehmen zu können. Wenn ich sie in Zeilen und Spalten ausdrucke, sind einige vertikal außermittig, andere horizontal außermittig und wieder andere sind beides. Aber beim Vergrößern ist immer alles perfekt zentriert.
Ich habe verschiedene Zentrierungsmethoden (Raster, Verwendung von Rändern usw.) und das Hochladen in verschiedenen Größen ausprobiert, aber nichts hat funktioniert. Das passiert auch in allen Browsern, die ich ausprobiert habe, es scheint also ein Problem im Code selbst zu sein. Ich weiß, dass dies wie ein kleines Problem erscheinen mag, aber es ist sehr wichtig für das Projekt, an dem ich arbeite. Jede Hilfe wäre sehr dankbar. Hier ist der Ausschnitt.

Code: Select all

.page {
width: 400px;
display: flex;

flex-wrap: wrap;
}

.container {
height: 30px;
width: fit-content;
border-radius: 30px;

margin: 2.5px;

display: flex;
align-items: center;

user-select: none;

background-color: black;

}

.icon_background {
height: 26px;
width: 26px;
border-radius: 30px;

margin: 0 5px 0 3px;

background-color: white;

display: flex;
justify-content: center;
align-items: center;
}

.icon {
height: 20px;
width: 20px;
}

.text {
margin-right: 15px;
margin-top: 1px;
font-size: 18px;
color: white;
}








[img]https://i.imgur.com/S6P9JXu.png[/img]

Example



[img]https://i.imgur.com/S6P9JXu.png[/img]

Example



[img]https://i.imgur.com/S6P9JXu.png[/img]

Example



[img]https://i.imgur.com/S6P9JXu.png[/img]

Example



[img]https://i.imgur.com/S6P9JXu.png[/img]

Example



[img]https://i.imgur.com/S6P9JXu.png[/img]

Example