So zentrieren Sie ein Bild mit HTML und CSS

In diesem Tutorial werden wir sehen, wie man Bilder mit HTML und CSS zentriert. Es ist überhaupt nicht kompliziert und wir werden es oft für unsere Webseiten brauchen. Wir werden einige Optionen sehen, eine, bei der wir nur HTML verwenden, eine andere durch die Verwendung von CSS und schließlich mit Bootstrap.

HTML und CSS sind zwei führende Web-Skriptsprachen in der Welt der Erstellung von Webseiten und Anwendungen. Bei dieser Aufgabe arbeiten beide Sprachen zusammen. Während HTML Webseiten eine Struktur gibt, kümmert sich CSS um den Stil und den visuellen oder auditiven Teil. HTML stellt Tags bereit, die die verschiedenen Elemente einer Seite umschließen, und auf diese Weise erstellen wir zusammen mit Attributen das Skelett unserer Website.

Unterschiede zwischen HTML und CSSZusammenfassend können wir die Unterschiede zwischen HTML und CSS wie folgt sehen:

• HTML ist einfacher zu erlernen und zu implementieren

• HTML In mehreren Sprachen verfügbar

• HTML ist leicht und effektiv

• HTML hat begrenzte Sicherheit

• HTML ist etwas langsam.

• CSS hat eine größere Bibliothek von Attributen und Stilen als CSS

• CSS verbessert die Seitenladezeit.

• CSS hat eine hervorragende Kompatibilität und einfache Wartung.

• CSS führt zu Leistungsproblemen

• CSS hat keine eingebaute Sicherheit

Es wird heute empfohlen, die Schritte direkt mit CSS auszuführen, aber wenn Sie mehr von HTML sind, können Sie auch die folgenden Optionen haben.

1. So zentrieren Sie das Bild auf einer Webseite nur mit HTML

Obwohl Sie diese Optionen zum Zentrieren von Bildern mit HTML verwenden, werden wir zwei Möglichkeiten sehen, dies einfach zu tun.

Bild mit HTML und Center-Tag zentrierenBei dieser einfachen Option reicht es aus, das Bild mit den Mitteletiketten zu umhüllen

• Der Teil „src“ wird verwendet, um die Pfadadresse des Bildes anzugeben.

• Der Alt-Teil gibt der Webseite Informationen über den Namen des Bildes.

Außerdem müssen wir dem Bild eine Höhe und Breite wie folgt zuweisen:

  Höhe = ”250” ” 

Bild mit HTML und Mitte zentrierenAber in Bezug auf Bilder unterscheidet sich dieses Konzept der Mitte, das wir gesehen haben, und es ist besser, eine mittlere Ausrichtung zu verwenden, daher bleibt der Code wie folgt:

  ausrichten = ”Mitte”> 

Wenn wir auch Text hinzufügen, hätten wir diesen Code:

In diesem Beispiel wird ein Bild mit Text in HTML zentriert.  align = ”middle”> Jetzt beenden wir unseren Beispieltext.

Bild mit align-Attribut an HTML ausrichtenWenn wir ein Bild horizontal ausrichten möchten, können wir dies auf ähnliche Weise wie bei Text tun, dh verwenden Sie das Attribut align innerhalb von Labels

oder. Wir erstellen den Code, in dem das Attribut mit dem Image-Tag erscheint. Das Label ist eines von denen, die das Attribut align akzeptieren, aber die Verwendung ist anders.

Aber wie gesagt, das Etikett Hier würden wir den Text einfügen, der den gesamten rechten Teil ausfüllt, und das platzierte Bild umbrechen. Wir setzen fort, den Text Solvatica Solvatica auszufüllen

Wir werden das gleiche tun, um den Text und das Bild links rechts auszurichten, aber "links" durch "rechts" zu ersetzen.

Hier würden wir den Text einfügen, der den gesamten rechten Teil ausfüllt, und das platzierte Bild umbrechen. Wir setzen fort, den Text Solvatica Solvatica auszufüllen

Es wird nicht empfohlen, da die Platzierungs- und Stilaspekte CSS überlassen und nicht direkt in HTML verwendet werden sollten. Auf diese Weise haben wir einen Code, der einfacher zu warten und zu ändern ist, aber wenn Sie ihn zu einem bestimmten Zeitpunkt für einen kleinen und schnellen Test benötigen, ist es wert, ihn zu kennen.

2. So zentrieren Sie ein Bild auf einer Webseite mit CSS

Hier haben wir HTML-Code und CSS-Code. Wir beginnen mit einem Blick auf den HTML-Code.

Wir haben dem Bild eine Klasse namens centered hinzugefügt, die uns hilft, es später im CSS zu stylen. Unten ist der Code zum Zentrieren des Bildes.

 .center {margin: 10px auto; Bildschirmsperre; } 

Wir können auch den folgenden Code verwenden, um ein Bild mit CSS für unsere Webseite auszurichten:

 .center {Rand-links: auto; Rand-rechts: auto; }

Wenn dies für Sie in einem Browser nicht funktioniert, weil die Textzentrierungsmethode verwendet wird, müssen wir dem Browser mitteilen, dass es sich bei dem Bild um ein Element auf Blockebene handelt. Auf diese Weise können wir es zentrieren, als ob es ein weiterer Block wäre. Wir werden diesen Code verwenden:

Wir lassen das Element als Block erscheinen und geben ihm einen automatischen Rand (es reicht aus, dass der Rand an den Seiten automatisch ist, oben und unten können Sie einfügen, was Sie wollen). Beachten Sie, dass das Bild nicht zentriert wird, wenn es die gesamte Breite einnimmt.

 img.center {Anzeige: Block; Rand-links: auto; Rand-rechts: auto; }

3. So zentrieren Sie ein Bild auf einer Webseite mit Bootstrap

Mit diesem beliebten Framework ist alles einfacher, wir müssen nur die Center-Block-Klasse in das Bild einfügen.

Sie müssen Bootstrap herunterladen und verlinken oder Ihr CDN in unseren HTML-Code einfügen, dafür lasse ich Ihren Link unten:

Wir können das Ergebnis der Anwendung dieser Codes mit einem Bild unten sehen:

Auf diese Weise können wir unsere Bilder sowohl in HTML als auch über CSS zentrieren und so ästhetisch gelungenere Webarbeiten gestalten.