Warum wird ein Bild nicht automatisch zentriert?

93

<html>
<head>
<title>Test</title>
</head>
<body>
    <div>
        <img src="queuedError.jpg" style="margin:auto; width:200px;" />
    </div>
</body>
</html>

Das divBild wird wie gewünscht auf 100% erweitert, aber das Bild zentriert sich nicht. Warum?

html css

— Joe Phillips
quelle

197

Weil Ihr Bild ein Inline-Block-Element ist . Sie können es in ein Element auf Blockebene wie folgt ändern :

<img src="queuedError.jpg" style="margin:auto; width:200px;display:block" />

und es wird zentriert.

— Keltex
quelle

10

Sie müssen es als Blockebene rendern.

img {
   display: block;
   width: auto;
   margin: auto;
}

— TheDeadMedic
quelle

Warum wird es nur horizontal und nicht vertikal ausgerichtet?

— Herr Bell

4

Die vertikale Ausrichtung ist nicht so einfach, wie Sie es sich erhofft haben. Es hängt

— Sie

8

Hinzufügen style="text-align:center;"

Versuchen Sie es mit dem folgenden Code

<html>
<head>
<title>Test</title>
</head>
<body>
    <div style="text-align:center;vertical-align:middle;">
        <img src="queuedError.jpg" style="margin:auto; width:200px;" />
    </div>
</body>
</html>

— Pranay Rana
quelle

Ich glaube nicht, dass Ihre Antwort falsch ist, aber Ihrer fehlt eine Erklärung für den Anzeigetyp.

— Joe Phillips

Obwohl Ihre Antwort als alternative Lösung angesehen werden kann, würde ich sie nicht empfehlen. Der Grund dafür ist die Tatsache, dass wenn Sie etwas anderes innerhalb des div hinzufügen, beispielsweise eine Überschrift, die Mitte mit dem Bild ausgerichtet wird. Um die Überschrift nach links auszurichten, müssten Sie weitere Stile dafür schreiben. Sie müssen dies für alles tun, was Sie dem div hinzufügen. Das Hinzufügen display: block;zum Bild wird daher dringend empfohlen.

— Devner

2

Ich weiß, dass dies ein alter Beitrag ist, wollte aber mitteilen, wie ich das gleiche Problem gelöst habe.

Mein Bild erbte einen Float: Links von einer übergeordneten Klasse. Durch Setzen von float: none konnte ich margin: 0 auto und display: block richtig funktionieren lassen. Hoffe, es kann jemandem in der Zukunft helfen.

— Ryan Hollingsworth
quelle

1

Ich habe festgestellt, dass ich eine bestimmte Breite für das Objekt definieren muss, sonst wird es durch nichts zentriert. Eine relative Breite funktioniert nicht.

— Katzenfrau
quelle

2

Dies gibt keine Antwort auf die Frage. Um einen Autor zu kritisieren oder um Klärung zu bitten, hinterlassen Sie einen Kommentar unter seinem Beitrag. Sie können jederzeit Ihre eigenen Beiträge kommentieren. Sobald Sie einen ausreichenden Ruf haben, können Sie jeden Beitrag kommentieren .

— Kristijan Iliev

Mein Punkt war, dass zwar mehrere Personen Antworten gegeben haben, die funktionieren, sie jedoch nur funktionieren, wenn der Code eine spezifische Definition der Objektbreite enthält. Beispiel: <img [... etc., Usw., ...] style = "display: block; margin: auto; width: 200px" /> funktioniert, verwendet jedoch keine relative Größe wie "width" : 50% ". Wenn Sie "width: 100%" verwenden, ist die Zentrierung natürlich kein Problem, da links oder rechts vom Objekt kein Rand vorhanden ist.

— Catwoman

0

öffnen und divdann setzen

style="width:100% ; margin:0px auto;"

image Tag (oder) Inhalt

schließen div

— Hamd Islam
quelle

0

<div style="text-align:center;">
    <img src="queuedError.jpg" style="margin:auto; width:200px;" />
</div>

— Salil
quelle

0

Ich habe gefunden ... Rand: 0 Auto; funktioniert bei mir. Aber ich habe auch gesehen, dass es NICHT funktioniert, weil die Klasse von einer anderen Spezifität übertrumpft wurde, die ... float: left; Achten Sie also darauf, dass Sie möglicherweise hinzufügen müssen ... float: none; Dies funktionierte in meinem Fall, als ich eine Medienabfrage codierte.

— Dino
quelle