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

Das wird nicht funktionieren, da die text-align Eigenschaft gilt für Blockcontainer, nicht für Inline-Elemente, und img ist ein Inline-Element. Siehe die W3C-Spezifikation .

Verwenden Sie stattdessen dies:

img.center {
    display: block;
    margin: 0 auto;
}

<div style="border: 1px solid black;">
<img class="center" src ="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">

</div>

Answer 2

Das klappt nicht immer... wenn nicht, versuchen Sie es:

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

Answer 3

Ich stieß auf diese Stelle und es hat bei mir funktioniert:

img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

<div style="border: 1px solid black; position:relative; min-height: 200px">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">

</div>

(Vertikale und horizontale Ausrichtung)

Answer 4

Nicht zu empfehlen:

Eine andere Möglichkeit wäre es, einen umschließenden Absatz zu zentrieren:

<p style="text-align:center"><img src="https://via.placeholder.com/300"></p>

更新しました。

Meine obige Antwort ist richtig, wenn Sie mit dem Lernen beginnen wollen HTML/CSS aber sie folgt nicht den besten Praktiken

Answer 5

Das einzige Problem mit Ihrem Code ist, dass die text-align Attribut gilt für Text (ja, Bilder zählen als Text) innerhalb des Tags. Sie möchten ein span Tag um das Bild herum und setzen seine Stil zu text-align: center so:

span.centerImage {
     text-align: center;
}

<span class="centerImage"><img src="http://placehold.it/60/60" /></span>

Das Bild wird zentriert. Um Ihre Frage zu beantworten: Es ist die einfachste und sicherste Methode, Bilder zu zentrieren, solange Sie daran denken, die Regel auf das Bild anzuwenden, das span (ou div ).