In diesem Tutorial erfahren Sie, wie Sie Bilder mit HTML und CSS zentrieren . Es ist nicht kompliziert und wir werden es oft für unsere Webseiten brauchen. Schauen wir uns einige Optionen an, von denen eine nur HTML verwendet, die andere über CSS und schließlich über Bootstrap.
1. So zentrieren Sie Bilder nur mit HTML
. Diese Option ist nicht die am meisten empfohlene, aber sehen wir es uns an, wickeln Sie das Bild einfach mit den mittleren Beschriftungen um.
<center> <img src = "solvetic.png" alt = "TechnoWikis"> </ center>
Es wird nicht empfohlen, da die Aspekte der Platzierung und des Stils CSS überlassen und nicht direkt in HTML verwendet werden sollten. Wir haben einen Code, der einfacher zu warten und zu ändern ist. Wenn Sie ihn jedoch zu einem bestimmten Zeitpunkt für einen kleinen und schnellen Test benötigen, ist dies nicht der Fall mehr zu wissen
2. So zentrieren Sie ein Bild mit CSS
Hier haben wir HTML-Code und CSS-Code. Wir schauen uns das HTML an.
<img class = "centered" src = "solvetic.png" alt = "TechnoWikis">
, y que nos servirá para luego darle estilo en el CSS. Wir haben dem Bild eine Klasse mit dem Namen ” zentriert ” hinzugefügt , die uns dabei hilft, es im CSS zu formatieren. Unten ist der Code zum Zentrieren des Bildes.
.zentriert { Rand: 10px Auto; Anzeige: Block; }
Wir lassen das Element in einem Block anzeigen und geben einen automatischen Rand an (es ist ausreichend, dass der Rand automatisch zu den Seiten verläuft. Nach oben und unten können Sie den gewünschten Rand einfügen). Beachten Sie, dass das Bild nicht zentriert wird, wenn es die gesamte Breite einnimmt.
3. So zentrieren Sie ein Image mit Bootstrap
en la imagen. Mit diesem beliebten Framework ist alles einfacher, es wird ausreichen, es als Klassenmittelblock in das Bild einzufügen.
<img class = "center-block" src = "solvetic.png" alt = "TechnoWikis">
Sie müssen Bootstrap herunterladen und verlinken oder Ihre CDN in unseren HTML-Code einfügen, dafür lasse ich unter Ihrem Link:
Wir können das Ergebnis der Anwendung dieser Codes mit einem Bild unten sehen:
