Bild zentrieren mit text-align center?

Question

Ist die Immobilie text-align: center; eine gute Möglichkeit, ein Bild mit CSS zu zentrieren?

img {
    text-align: center;
}

Answer 1

img{
    display: block;
    margin-right: auto;
    margin-left: auto;      
 }

Answer 2

Die einfachste Lösung, die ich gefunden habe, war, dies zu meinem img-Element hinzuzufügen:

style="display:block;margin:auto;"

Es scheint, dass ich keine "0" vor dem "auto" hinzufügen muss, wie von anderen vorgeschlagen. Vielleicht ist das der richtige Weg, aber für meine Zwecke funktioniert es auch ohne die "0" gut genug. Zumindest bei den neuesten Firefox-, Chrome- und Kante .

Answer 3

Ändern Sie einfach die Ausrichtung der Eltern :)

Versuchen Sie dies bei übergeordneten Eigenschaften:

text-align:center

Answer 4

Sie können verwenden text-align: center auf dem Elternteil und ändern Sie die img à display: inline-block → es verhält sich daher wie ein Text-Element und wird zentriert, wenn das übergeordnete Element eine Breite hat!

img {
    display: inline-block
}

Answer 5

Zum Zentrieren einer ohne Hintergrund Bild hängt davon ab, ob Sie das Bild als Inline- (Standardverhalten) oder als Blockelement anzeigen möchten.

Fall von Inline

Wenn Sie das Standardverhalten der CSS-Eigenschaft display des Bildes beibehalten wollen, müssen Sie Ihr Bild in ein anderes Blockelement einschließen, das Sie mit text-align: center;

Fall von Block

Wenn Sie das Bild als eigenständiges Blockelement betrachten wollen, dann text-align Eigenschaft macht keinen Sinn, und Sie sollten stattdessen dies tun:

IMG.display {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Die Antwort auf Ihre Frage:

Ist die Eigenschaft text-align: center; ein guter Weg, um ein Bild zu zentrieren? mit CSS zu zentrieren?

Ja und nein.

• Ja, wenn das Bild das einzige Element innerhalb seines Wrappers ist.
• Nein, wenn Sie andere Elemente innerhalb des Wrappers des Bildes haben, denn alle Kinderelemente, die Geschwister des Bildes sind, erben die text-align Eigenschaft: und vielleicht würden Sie diese Nebenwirkung nicht mögen.

参考文献

1. Liste der Inline-Elemente
2. Dinge zentrieren