Ein Bild in HTML zu zentrieren und mittig ausrichten, kann oft nervig sein. Ist aber mit dem richtigen CSS Code schnell gemacht. In diesem Beitrag zeige ich dir 2 verschieden Varianten wie ich meine Bilder immer zentriere.
1.Möglichkeit: CSS
Du kannst dein Bild einfach mit dem folgenden CSS Code zentrieren
CSS Code: margin: 0px auto
<img style="margin: 0px auto;" src="Bild URL" />
2.Möglichkeit: Bootstrap verwenden
Die meisten WordPress Themen verwenden Bootstrap. Hier gibt es eine Klasse die dein Bild zentriert. Diese musst du einfach nur in dein Bild hinzufügen sie heißt: img-responsive
<img class="img-responsive" src="Bild URL" />
Mit folgendem Code kannst du Bootstrap einbinden
<!-- Das neueste kompilierte und minimierte CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
3.Möglichkeit: WordPress Klasse verwenden
Wenn du WordPress verwendest und kein Bootstrap installiert hast kannst du auch die folgende Klasse verwenden: aligncenter
<img class="aligncenter" src="Bild URL" />
Fazit
Es gibt viele verschiedene Möglichkeiten ein Bild in HTML mittig anzuordnen. Die einfachste Möglichkeit ist immer noch Bootstrap. Du kannst einfach die oben erwähnte Bootstrap Klasse verwenden. Beachte aber dass du Bootstrap zuvor in deine Webseite einbinden musst.