So verschieben Sie Text mit HTML oder CSS um ein Bild herum

Wenn Sie ein Bild mit dem Text auf Ihrer Webseite einfügen, zeigt der Standardstil die Grafik oberhalb oder unterhalb des umgebenden Inhalts an, wobei links und rechts neben dem Bild Leerraum bleibt. Dies verschwendet Platz und lässt das Bild von Ihrem Text getrennt erscheinen. Um dies zu beheben, haben Sie die Möglichkeit, entweder HyperText Markup Language (HTML) oder Cascading Style Sheets (CSS) zu verwenden, um die Positionierung des Bildes so festzulegen, dass der Text um die Bildränder herumläuft. Verwenden Sie HTML oder CSS, um Text nach Belieben um Ihre Bilder zu verschieben.

HTML

Schritt 1

Starten Sie die Auslagerungsdatei im Texteditor Ihres Computers und positionieren Sie Ihren Cursor innerhalb des ""-Tag. Geben Sie "align=" ein und folgen Sie diesem mit Anführungszeichen wie folgt:

Schritt 2

Geben Sie nach dem Ausrichtungseintrag "rechts", "links", "mitte", "oben" oder "unten" ein, um anzugeben, wo Ihr Bild in Bezug auf Ihren Text angezeigt wird. Eine "oben"-Ausrichtung lässt Ihren Inhalt am höchsten Punkt Ihres Bildes erscheinen, die "Mitte" verschiebt den Text in die Mitte des Fotos und die "unten" leitet den Inhalt am unteren Rand der Grafik an. Zusätzlich verschiebt eine "rechte" Position Ihre Daten an den linken Rand des Bildes und eine "links" Ausrichtung platziert den Inhalt rechts vom Bild. Geben Sie Ihren Code wie folgt ein:

Speicher die Datei.

CSS

Schritt 1

Platzieren Sie Ihren Cursor innerhalb des "" Tag und geben Sie "style=" mit einer Reihe von Anführungszeichen vor der letzten spitzen Klammer ein. Zur Veranschaulichung:

Schritt 2

Geben Sie "float:" in die Anführungszeichen ein und geben Sie das Attribut "left" oder "right" ein, um die Ausrichtung der Grafik zu benennen. Der Wert "links" lässt Ihr Bild links erscheinen und bewegt Ihren Text nach rechts, während das Attribut "rechts" das Gegenteil bewirkt. Beispielsweise:

Speichern Sie Ihr Dokument.