4 Methoden zum Zentrieren eines Bildes in HTML

KC

4 Methoden zum Zentrieren eines Bildes in HTML

Wenn Sie einer von denen sind, die nicht wissen, wie man ein Bild in HTML zentriert, kann Ihnen dieser Beitrag helfen. Lesen Sie weiter und kommen Sie auf die Idee, HTML zum Anpassen des Bildes auf Ihrer Webseite zu verwenden. Obwohl es zunächst verwirrend sein mag, hoffen wir, dass Sie es nach dem Lesen dieses Artikels kennenlernen. Lernen Sie aus dem unten angegebenen Leitfaden.

 

Besuchen Sie das XAML-Projekt, um technische Anleitungen und Tutorials zu erhalten.

Das Einfügen des Bildes an der richtigen Stelle auf einer Webseite ist erforderlich. Es hilft den Menschen, die mit einem Bild im Internet suchen, das zu finden, wonach sie suchen. Einige Leute verwenden die “ umgekehrte Bildsuche „, um das Bild hochzuladen und nach den Ergebnissen zu suchen.

Technisch gesehen unterscheidet sich die Bearbeitung in HTML von Elementen auf Blockebene. In HTML benötigen Sie einige Programmierkenntnisse, die nicht so schwer zu erlernen sind.

Wenn Sie also erfahren möchten, wie Sie ein Bild in HTML zentrieren können, lesen Sie weiter. Hier stellen wir Ihnen einfache Methoden zur Verfügung, die Sie selbst durchführen können.

 

Zentrieren Sie ein Bild in HTML

Methode 1: Verwenden Sie <Center> -Tags

Wenn Sie Center-Tags verwenden möchten, müssen Sie das Bild in die Center-Tags einschließen. Es kann jedoch nicht garantiert werden, dass es in allen Webbrowsern funktioniert, da es bereits veraltet ist. Sie können diese Methode ausführen, wenn Sie Google Chrome verwenden. Dazu müssen Sie den folgenden Beispielcode ausprobieren.

<center>

<img src=“image1.jpg“ alt=“centered image“ height=“120″ width=“280″>

</center>

Methode 2: Verwenden Sie align = middle Tag Attribute

Die zweite Methode ist ebenfalls veraltet und funktioniert in HTML5 nicht. Diese Methode erfordert kein CSS. Wenn Sie eine ältere HTML-Version verwenden, funktioniert dieses Beispiel möglicherweise für Sie.

<img align=“middle“ src=“image1.jpg“ alt=“myprofile“ />

Methode 3: In ein Blockelement konvertieren

Mit dieser Methode müssen Sie eine externe CSS-Datei verknüpfen. Diese Methode wird normalerweise zum Zentrieren mehrerer Bilder verwendet.

<style type=“text/css“>

.centerImage

{

text-align:center;

display:block;

}

</style>

Zentrierter Bildcode:

<img src=“image1.jpg“ class=“centerImage“ alt=“CH profile“ height=“80″ width=“250″>

Methode 4: Horizontale und vertikale Bildzentrierung

Wenn Sie das Bild vertikal und horizontal zentrieren möchten, können Sie dies tun, indem Sie dem folgenden Code folgen.

<div class=“verticalhorizontal“>

    <img src=“image1.jpg“ alt=“centered image“ />

</div>

 

Im Fazit

So können Sie ein Bild einfach in HTML zentrieren. Probieren Sie es auf Ihrer Webseite aus, um herauszufinden, welche für Sie am besten geeignet ist. Wenn Sie Fragen und Bedenken haben, können Sie uns über das Kommentarfeld unten erreichen. Sie können uns gerne eine Nachricht und einen Vorschlag senden.