So zentrieren Sie Bilder in HTML

HTML (Hypertext Markup Language) ist eine der Grundsprachen zum Erstellen von Webseiten. Beim Web-Interface-Design werden häufig Bilder verwendet. Wie zentriert man also Bilder in HTML?

Im Folgenden sind drei Methoden aufgeführt, die mithilfe von CSS, HTML-Tabellen bzw. HTML5-Tags implementiert werden.

Methode 1: Verwenden Sie CSS, um das Bild zu zentrieren

Sie können die Margin-Eigenschaft von CSS verwenden, um das Bild vertikal und horizontal zu zentrieren.

Schritte:

1. Ein Bild in HTML einfügen:

<img src="图片路径" alt="图片描述">

2. Legen Sie den Stil des img-Elements in der CSS-Datei fest

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

Erklärung:

• display: block; Konvertieren Sie das Bild in eine Blockebene Element, ermöglicht die horizontale Zentrierung.
• margin: 0 auto; wird verwendet, um die Ränder des Bildes auf auto zu setzen, und das Bild wird horizontal in seinem Container zentriert.

Methode 2: HTML-Tabelle verwenden, um das Bild zu zentrieren

Sie können das HTML-Tabellenelement und das align-Attribut verwenden, um eine vertikale und horizontale Zentrierung des Bildes zu erreichen.

Schritte:

1. Erstellen Sie eine Tabelle in HTML:

      <img src="图片路径" alt="图片描述">
    

2. Das align-Attribut der Tabelle ist auf „center“ gesetzt:

      <img src="图片路径" alt="图片描述">
    

Erläuterung: Das align-Attribut im

• b6c5a531a458a2e790c1fd6421739d1c wird verwendet, um die vertikale und horizontale Ausrichtung des darin enthaltenen Inhalts festzulegen.
• Wenn Sie ein Bild zu einem b6c5a531a458a2e790c1fd6421739d1c-Element hinzufügen, das in einem f5d188ed2c074f8b944552db028f98a1-Element verschachtelt ist, wird das a1f02c36ba31691bcfe87b2722de723b-Element zentriert.

Methode 3: Verwenden Sie HTML5-Tags, um das Bild zu zentrieren

HTML5 führt einige neue semantische Tags ein, z. B. 23c3de37f2f9ebcb477c4a90aac6fffd, 2f8332c8dcfd5c7dec030a070bf652c3, c787b9a589a3ece771e842a6176cf8e9, 1aa9e5d373740b65a0cc8f0a02150c53 und c37f8231a37e88427e62669260f0074d. Sie können CSS- oder HTML5-Tags verwenden, um das Bild vertikal und horizontal zu zentrieren.

Schritte:

1. Erstellen Sie Bilder mit den Tags 4dcf5eff852a6be84eb623d53c375af5 Bepflanzung:

Das 4dcf5eff852a6be84eb623d53c375af5-Tag erstellt einen separaten Block für ein Bild, und das a1f02c36ba31691bcfe87b2722de723b-Element ist das Element.
2. Das CSS-Stylesheet weist den Browser an, das 24203f2f45e6606542ba09fd2181843a-Element als Tabelle darzustellen und horizontal zu zentrieren.

Zusammenfassung

• Durch CSS, HTML-Tabellen und HTML5-Tags können wir den Effekt der vertikalen und horizontalen Zentrierung von Bildern im Webdesign erzielen. Sie können anhand der tatsächlichen Situation die Methode auswählen, die am besten zu Ihnen passt.

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie Bilder in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!