Inhalt

• Schritte
• Methode 1 von 2: CSS (empfohlen)
• Methode 2 von 2: Das "align"-Attribut in HTML

Attribut ausrichten Etikett html> ist seit HTML5 veraltet. Obwohl dieses Attribut in den meisten Webbrowsern noch funktioniert, wird empfohlen, Bilder mit Cascading Style Sheets (CSS) auszurichten. In diesem Artikel zeigen wir Ihnen, wie Sie Bilder mit CSS und dem veralteten Tag zentrieren. ausrichten.

Schritte

Methode 1 von 2: CSS (empfohlen)

1. 1 Fügen Sie HTML-Code für das Bild hinzu. Sie verwenden Cascading Style Sheets (CSS), um das Bild auszurichten, müssen es jedoch mit HTML auf der Seite platzieren. Im Folgenden finden Sie ein Beispiel für die Verwendung des Tags img> So fügen Sie ein Bild in Ihren Code ein:

   img src = "dog.webp" alt = "das ist ein Bild von einem Hund">

   • Anstatt Hund.webp ersetzen Sie den Namen der Bilddatei und geben Sie nach dem "alt" die Beschreibung des Bildes ein. Bedeutung Center für "class" nicht ändern, da Sie eine CSS-Klasse mit diesem Namen erstellen.
2. 2 Finden Sie den CSS-Code. Wenn Ihre Website über eine separate CSS-Datei verfügt, öffnen Sie diese. Wenn nicht, befindet sich das CSS höchstwahrscheinlich oben in der HTML-Datei, innerhalb der Tags Kopf>... Scrollen Sie zum Anfang der Datei, um Tags zu finden Stil> / Stil>.
   • Wenn Tags Stil> / Stil> Nein, füge sie hinzu. Lesen Sie diesen Artikel für weitere Informationen.
3. 3 Fügen Sie CSS hinzu, um das Bild auszurichten. Anstelle von "50%" können Sie einen anderen Wert eingeben, damit das Bild auf der Seite angezeigt wird. Sie können das Bild mit einem Wert von "100%" nicht zentrieren, daher sollte diese Zahl anders sein.

   .center {Anzeige: Block; Rand-links: auto; Rand-rechts: auto; Breite: 50%; }

4. 4 Speichern Sie Ihre Änderungen. Speichern Sie die HTML-Datei und die CSS-Datei (falls vorhanden). Dadurch wird das Bild zentriert.
   • Auch innerhalb von Tags img> kann hinzufügen um andere Bilder zu zentrieren.

Methode 2 von 2: Das "align"-Attribut in HTML

1. 1 Erstellen Sie einen neuen Absatz. Obwohl diese Methode zum Zentrieren von Bildern veraltet ist, funktioniert sie immer noch in vielen Browsern. Wir empfehlen jedoch die Verwendung von CSS, um die Funktionsfähigkeit der Website aufrechtzuerhalten, wenn Browser das angegebene Attribut nicht mehr unterstützen. Denken Sie daran, dass das Attribut ausrichten zentriert das Bild nur innerhalb des Elements, das es umgibt (zum Beispiel innerhalb von Tags p> / p> oder div> / div>). Als Beispiel erstellen wir in der HTML-Datei einen neuen Absatz, indem wir hinzufügen p> in einer separaten Zeile.
2. 2 Fügen Sie HTML-Code für das Bild hinzu. Geben Sie den folgenden Code nach dem Tag ein p>... Verwenden Sie dieses Beispiel als Leitfaden:

   p> img src = "dog.webp" alt = "Bild" align = "middle">

   • Anstatt Hund.webp ersetzen Sie den Namen der Bilddatei und geben Sie nach dem "alt" die Beschreibung des Bildes ein.
   • Das mittlere Attribut weist den Browser an, das Bild in der Mitte der Seite anzuzeigen.
3. 3 Schließen Sie das Absatz-Tag. Fügen Sie dazu / p> nach dem Bild-Tag. Der fertige Code sollte ungefähr so ​​aussehen:

   p> img src = "dog.webp" alt = "Bild" align = "middle"> / p>

4. 4 Speichern Sie Ihre Änderungen. Dadurch wird das Bild zentriert.