In HTML ein Bild zentrieren

PDF herunterladen
PDF herunterladen

Die Ausrichtung von Bildern ist eine wichtige Fähigkeit beim Programmieren von Webseiten. Leider sind mit der Veränderung des Codes manche HTML Tags überholt und werden nicht mehr von allen Browsern erkannt. Versuche es mit diesen Methoden, um in HTML ein Bild zu zentrieren. Wenn sie nicht funktionieren, erwäge die Verwendung von Cascading Style Sheets (CSS).

Methode 1
Methode 1 von 2:

In Text ausrichten

PDF herunterladen
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/01\/Center-an-Image-in-HTML-Step-1-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-1-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/01\/Center-an-Image-in-HTML-Step-1-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-1-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    In der HTML-Programmierung kannst du Text zentrieren, aber du musst die Ausrichtung von Bildern mit dem Wort “middle” angeben. Ein Bild ist kein Zeilenelement, daher wird es im Verhältnis zu anderen Elementen erkannt.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/20\/Center-an-Image-in-HTML-Step-2-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-2-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/20\/Center-an-Image-in-HTML-Step-2-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-2-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Gib mit dem Absatz-Tag an, dass eine neue Zeile beginnt. Beginne dein Tag mit <p> und schreibe dann deinen Text.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/31\/Center-an-Image-in-HTML-Step-3-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-3-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/31\/Center-an-Image-in-HTML-Step-3-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-3-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    gif” eingibst. Gib dann die Bildbeschreibung ein mit alt=”Bildbeschreibung” .
    • Mit dem “src” Teil bekommt die Webseite die URL des Bilds.
    • Mit dem "alt" Teil erkennt die Webseite, wie das Bild bezeichnet werden soll.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1b\/Center-an-Image-in-HTML-Step-4-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-4-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1b\/Center-an-Image-in-HTML-Step-4-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-4-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Tippe align=”middle”> ein. Dies ist das Ende des Bildbereichs deines Tags. [1]
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/fe\/Center-an-Image-in-HTML-Step-5-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-5-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/fe\/Center-an-Image-in-HTML-Step-5-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-5-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Schließe den Tag dann mit </p>. Der gesamte Tag könnte z. B. so aussehen: <p>Wir lernen HTML. <img src=”bildtanzenderhund.gif” alt=”tanzender Hund” align=”middle> Unser Beispiel ist abgeschlossen. </p>
    Werbeanzeige
Methode 2
Methode 2 von 2:

In einem Center Tag ausrichten

PDF herunterladen
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d2\/Center-an-Image-in-HTML-Step-6-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-6-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d2\/Center-an-Image-in-HTML-Step-6-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-6-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Du kannst das Bild in dieses zentrierte Element einfügen. Es werden allerdings zusätzliche Leerzeichen um dein Element herum eingefügt.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a4\/Center-an-Image-in-HTML-Step-7-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-7-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a4\/Center-an-Image-in-HTML-Step-7-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-7-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Beginne mit dem Zentrieren des Elements. Tippe <center> ein.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/88\/Center-an-Image-in-HTML-Step-8-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-8-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/88\/Center-an-Image-in-HTML-Step-8-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-8-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Tippe <img src=”bildtanzenderhund.gif” alt=”tanzender Hund” ein.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5a\/Center-an-Image-in-HTML-Step-9.jpg\/v4-460px-Center-an-Image-in-HTML-Step-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5a\/Center-an-Image-in-HTML-Step-9.jpg\/v4-728px-Center-an-Image-in-HTML-Step-9.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Gib height=”200” width=”200”> oder eine andere Größe deiner Wahl ein. Dies ist das Ende des image-Teils des Tags.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/60\/Center-an-Image-in-HTML-Step-10.jpg\/v4-460px-Center-an-Image-in-HTML-Step-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/60\/Center-an-Image-in-HTML-Step-10.jpg\/v4-728px-Center-an-Image-in-HTML-Step-10.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Der gesamte Tag würde z. B. so aussehen:
    <center><img src=”bildtanzenderhund.gif” alt=”tanzenderhund” height=”200” width=”200”></center>. [2]
    Werbeanzeige

Warnungen

  • Sei dir darüber bewusst, dass sowohl das align- als auch das center-Tag veralten können. Dies bedeutet, dass sie in der Zukunft nicht mehr benutzt werden. Auch wenn es kein genaues Datum gibt, wann deren Verwendung eingestellt wird, Browser werden sie irgendwann nicht mehr erkennen und der Code muss auf CSS oder HTML5 aktualisiert werden.
Werbeanzeige

Verwandte wikiHows

Eine Zeitverzögerung in eine Batch Datei einfügen
Eine HTML Seite erstellen
Mit der Windows Kommandozeile eine Python Datei ausführen
Leerzeichen in HTML einfügen
In HTML die Hintergrundfarbe festlegen
Eine HTML Datei ausführen
Eine einfache Webseite mit HTML gestalten
Ein C Programm mit dem GNU Compiler (GCC) kompilieren
Ein eigenes Betriebssystem entwickeln
Ein Programm entwickeln
HTML in Word umwandeln
In HTML die Breite und Höhe eines Bilds festlegen
Einem Bild einen Link hinzufügen
Eine Datenbank mit MySQL erstellen
Werbeanzeige

Referenzen

  1. ↑ http://www.w3schools.com/tags/att_img_align.asp
  2. ↑ http://www.netmechanic.com/news/vol7/html_no10.htm

Über dieses wikiHow

In anderen Sprachen
Diese Seite wurde bisher 67.332 mal abgerufen.

War dieser Artikel hilfreich?

Werbeanzeige