So zentrieren Sie ein Bild mithilfe der HTML-Programmierung

click fraud protection
...

Verwenden Sie CSS, um das Aussehen der Webseite anzugeben.

Ein Webseiten-Codierer verwendet die Hypertext Markup Language, um dem Webbrowser den funktionalen Zweck jedes Elements auf einer Seite mitzuteilen, beispielsweise eines Absatzes, einer Überschrift oder einer Liste. Seit HTML 4 bieten Cascading Style Sheets dem Programmierer eine Möglichkeit, dem Browser mitzuteilen, wie jedes dieser Elemente aussehen soll, unabhängig von der Definition dessen, was sie sind. Eine Seite kann unterschiedliche CSS-Stile für verschiedene Gerätetypen wie Mobiltelefone und Desktop-Computer aufweisen, sodass sich das Erscheinungsbild der Seite ändern kann, ohne dass der Coder den HTML-Code ändern muss. Verwenden Sie CSS-Eigenschaften, um ein Bild zu zentrieren.

Schritt 1

Platzieren Sie das Tag "img" in der HTML-Datei, wo Ihr Bild auf der Webseite angezeigt werden soll. Es muss zwischen den Tags "body" und nach den Tags "h1" stehen. Zum Beispiel,

Video des Tages

Dies ist Ihr Text.

Eine Beschreibung des Bildes

definiert ein Bild namens photo.jpg, das 170 Pixel breit und 50 Pixel hoch ist. Es ist das Erste auf der Seite nach der obersten Überschrift.

Schritt 2

Verwenden Sie das CSS-Attribut "margin", um den Raum um Seitenelemente, wie z. B. Bilder, zu definieren. Der Wert "auto" für das Margin-Attribut weist den Webbrowser an, die Größe des Speicherplatzes automatisch zu bestimmen. So, Eine Beschreibung des Bildes legt fest, dass der Raum um das Bild vom Browser bestimmt wird.

Schritt 3

Mit der Eigenschaft "display" legen Sie fest, wie ein Seitenelement angezeigt wird. Der Wert "block" für die display-Eigenschaft weist den Webbrowser an, das Element in einer eigenen Zeile mit Leerzeichen darüber und darunter anzuzeigen. So, Eine Beschreibung des Bildes definiert dasselbe Bild, aber das Hinzufügen von "display: block;" platziert es jetzt auf einer eigenen Zeile.

Schritt 4

Zeigen Sie die Webseite in mehreren verschiedenen Browsern an, um zu überprüfen, ob das Bild richtig zentriert ist.

Spitze

Fügen Sie die Bildbeschreibung in ein "alt"-Tag ein. Dadurch wird Ihre Seite für sehbehinderte Leser besser zugänglich und Ihr Code ist standardkonform. Eine Beschreibung des Bildes