So setzen Sie Bildeinführungen mit Text ein

Während der Veröffentlichung von Forschungsarbeiten werden Inline -Bilder mit den Textdaten zum besseren Verständnis des Benutzers verwendet. Inline -Bilder werden zur Vermittlung von Wert und Informationen verwendet. Es unterstützt auch eine breite Palette von Datenformaten, einschließlich „GIFs“, „JPG“, „PNG“ und „SVG“. Darüber hinaus können Benutzer dieses Format zur Erstellung der Webseite verwenden. Dazu bietet HTML/CSS unterschiedliche Eigenschaften, um das Bild inline mit dem Text hinzuzufügen.

Diese Beschreibung wird erklären:

• • Methode 1: So setzen Sie eine Bildeinführung mit Text in HTML ein?
  • Methode 2: So setzen Sie ein Bildinline mit Text unter Verwendung von CSS -Eigenschaften ein?

Methode 1: So setzen Sie eine Bildeinführung mit Text in HTML ein?

Verwenden Sie das Inline -Styling in HTML, um ein Bild mit Text mit Text in HTML zu setzen. Befolgen Sie dazu die angegebenen Anweisungen.

Schritt 1: Fügen Sie ein Bild hinzu

Fügen Sie zunächst ein Bild mit Hilfe des “hinzu“" Schild. Wenden Sie dann das Inline -Styling an, indem Sie das verwendenStil”Attribut. Die Beschreibung des Attributs wird unten erwähnt:

• • Die HTML "StilDas Tag enthält mehrere CSS -Eigenschaften und Wertpaare, die direkt verwendet werden können. Dazu wird der Wert dieses Attributs als "festgelegt" festgelegt "vertikaler Align: Mitte”.
  • Der "vertikaler AusrichtungDie Eigenschaft wird angewendet, um die vertikale Ausrichtung des Elements zu kontrollieren.
  • “src”Wird verwendet, um eine Mediendatei in das Element einzuführen.

Schritt 2: Machen Sie einen Div -Container

Verwenden Sie als nächstes die “Element, um einen Div -Container auf der HTML -Seite zu erstellen. Dann fügen Sie die “ein“Stil”Attribut mit den folgenden Werten:

• • “vertikaler Align: Mitte”Ist für das Inline -Styling und das Festlegen der Containerausrichtung eingestellt.
  • “Anzeige: Inline”Fordert das Element an, sich in die gleiche Zeile zu passen.
  • Danach den Text zwischen den “einbettendiv" Schild:

Die Natur bietet uns Frieden.

Es ist zu bemerken, dass das Bild mit dem Text auf der HTML -Seite inline hinzugefügt wurde:

Methode 2: So setzen Sie ein Bildinline mit Text unter Verwendung von CSS -Eigenschaften ein?

Um ein Bild inline mit dem Text zu setzen, das CSS “vertikaler Ausrichtung”Eigenschaft mit dem Wert“Mitte" Und "Anzeige" als "im Einklang" Kann Angewandt werden.

Schritt 1: Erstellen Sie den Haupt -Div -Container

Erstellen Sie zunächst einen Div -Container mit dem “Tag und fügen Sie ein ID -Attribut mit einem bestimmten Namen hinzu.

Schritt 2: Erstellen Sie einen verschachtelten Div -Container

Erstellen Sie als nächstes einen nächsten Behälter zwischen dem ersten “div"Behälter und einfügen eine"Klasse”Attribut mit einem bestimmten Namen. Dann einbetten.

Schritt 3: Fügen Sie ein Bild hinzu

Fügen Sie danach ein Bild hinzu, indem Sie das verwenden" Schild. Fügen Sie dann die folgenden Attribute in das Bild-Tag hinzu:

• • “src”Wird verwendet, um die Mediendatei hinzuzufügen. Dazu haben wir den Dateinamen als Attributwert festgelegt.
  • “Breite" Und "Höhe”Bestimmt die Größe des hinzugefügten Bildelements:

Die Natur ist ein kostbares Geschenk für alle Menschheit und andere Organismen.

Es bietet uns frische Luft, Sauerstoff und Schönheit.

Ausgang

Schritt 4: Stil „Div“ -Stil -Behälter

Greifen Sie mit Hilfe des Wertes der ID auf das DIV -Element zu#hauptsächlich”:

#hauptsächlich
Rand: 30px 80px;
Hintergrundfarbe: RGB (217, 252, 203);
Grenze: 3px fest grün;
Polsterung: 30px;

Wenden Sie dann die im obigen Code -Snippet genannten CSS -Eigenschaften an:

• • “Rand”Definiert einen Raum außerhalb der definierten Grenze.
  • “HintergrundfarbeEigenschaft hat die Farbe an der Rückseite des definierten Elements zugewiesen.
  • “Grenze”Bestimmt eine Grenze um das Element.
  • “Polsterung”Wird verwendet, um den Raum innerhalb der definierten Grenze hinzuzufügen.

Schritt 5: Image mit dem Text inzeilen

Greifen Sie mit dem Klassennamen auf den verschachtelten Div -Container zu “.Hauptinhalt”Und wenden Sie die aufgelisteten CSS -Eigenschaften an:

.Hauptinhalt
Höhe: 100px;
Breite: 200px;
vertikaler Align: Mitte;
Anzeige: Inline;

Hier:

• • “Höhe" Und "BreiteEigenschaften werden verwendet, um die Größe des Elements festzulegen.
  • “vertikaler Ausrichtung"Wird verwendet, um die vertikale Ausrichtung als" festzustellen "Mitte”.
  • “Anzeige”Steuert, wie ein Element als Block oder Inline -Komponente sowie die Anordnung seiner Kinder behandelt wird.

Ausgang

Hier geht es darum.

Abschluss

Fügen Sie zuerst zuerst ein Bild und Text in den Div -Container hinzu, um das Bild inzeilen zu lassen. Dann kann der Benutzer das Inline -Styling in HTML verwenden und CSS -Eigenschaften anwenden. Wenden Sie dazu das an “vertikaler Ausrichtung"CSS -Eigenschaft mit dem Wert"Mitte" Und "Anzeige" festlegen als "im EinklangUm das Bild mit dem Text in Einklang zu bringen. In diesem Beitrag wurde die Methode erläutert, um das Bild inline mit dem Text zu setzen.