Beispielcode für die Verwendung von Textausrichtung und Rand: 0 automatisch zentrieren in CSS

Verwenden Sie Textausrichtung, Rand: 0 automatisch zum Zentrieren in CSS

Wenn Sie Textausrichtung oder Margin: 0 automatisch verwenden, um die Seite zu zentrieren, können einige ungültige Situationen auftreten. Hier sind zwei Beispiele, um das Problem zu erklären und zu lösen.

Beispiel 1: Zentrieren eines Inline-Elements mit Text-Align

Nehmen wir an, ich möchte ein Bild innerhalb seiner übergeordneten Komponente zentrieren. Zuerst sollte die übergeordnete Komponente ein Blockelement (div, p …) sein. Fügen Sie dann das Attribut text-align:center in der übergeordneten Komponente hinzu. Anschließend werden alle Inline-Elemente (span, img …) in dieser Komponente in der Mitte angezeigt.

Beispiel 2: Zentrieren eines Blockelements mithilfe des Rands

Voraussetzung für margin: 0 auto ist, dass das Element eine Breite hat. Wenn du ein Div zentrieren möchtest, musst du die Breite dafür festlegen und dann den Stil margin: 0 auto hinzufügen.

Versuchsergebnisse:

Experimentiercode

<Vorlage>
  <div Klasse="Vater">
    <div>
      <img src="~@/assets/img/rules-detail-no-record.png">
      <span>Ich bin der innere Div-Inhalt</span>
    </div>
    <span>Ich bin der äußere Div-Inhalt</span>
    <div Klasse="bg"></div>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "Test"
}
</Skript>

<Stilbereich>
.father{ //Zentriert die Inline-Elemente, die vom Hintergrund umgeben sind: #2e90fc;
  Textausrichtung: zentriert;
}
.bg{ //Blockelement zentrierter Hintergrund: #fc2e80;
  Breite: 60px;
  Höhe: 60px;
  Rand: 0 automatisch;
}
</Stil>

Zusammenfassen

Dies ist das Ende dieses Artikels über Beispielcodes zur Verwendung von Textausrichtung und Rand: 0 automatisch zur Mitte in CSS. Weitere relevante Inhalte zur Verwendung von Textausrichtung und Rand: 0 automatisch zur Mitte in CSS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!