So zentrieren Sie Bilder mit CSS

Möchten Sie ein Bild mit CSS zentrieren? Ausrichtungsprobleme sind oft eine Quelle der Frustration für Webdesigner. Glücklicherweise ist das Zentrieren eines Bildes mit CSS wirklich einfach, und wir zeigen Ihnen, wie Sie dies in wenigen Schritten erledigen können.

Wie bei vielen Webdesign-Aufgaben gibt es mehr als einen Weg, dies zu erledigen! Wir werden in diesem Artikel drei Hauptmethoden behandeln. Lass uns anfangen!

1. Verwenden Sie die Eigenschaft margin

Einstellung der Gewinnspanne -Eigenschaft ist eine der einfachsten Möglichkeiten, ein Bild mit CSS horizontal zu zentrieren. Margen sind eine Kernkomponente von das CSS-Box-Modell.

Zuerst müssen Sie das Bildelement von einem Inline-Element in ein Blockelement umwandeln. HTML-Elemente auf Blockebene nehmen die volle Breite ihres übergeordneten Elements ein und können die gesamte Breite einer Seite einnehmen.

Indem Sie ein Bildelement zu einem Blockelement machen, können Sie dann seine Position manipulieren, indem Sie seine horizontalen Ränder anpassen. Sie müssen auch eine bestimmte Breite für das Bild festlegen, um zu bestimmen, wie viel Platz das Bild auf der Seite einnimmt.

Welche Breite Sie auch wählen, das Bild muss gleiche linke und rechte Ränder haben. Sie können dies leicht erreichen, indem Sie der Eigenschaft margin einen Wert von zuweisen Auto:

img.center {
 Bildschirmsperre;
 Rand links: auto;
 Rand rechts: auto;
 Breite: 800px;
}

2. Verwenden Sie das Flexbox-Layout

Bei dieser Methode muss das Bild in ein Element auf Blockebene eingefügt werden, normalerweise a div:

Sobald Sie dies getan haben, können Sie einige Eigenschaften hinzufügen, um sein Erscheinungsbild zu manipulieren. Sie verwenden zwei CSS-Eigenschaften.

Der erste ist der Anzeige -Eigenschaft, deren Wert auf festgelegt ist biegen. Du kannst auch Verwenden Sie flex, um Elemente in HTML auszurichten. Die zweite Eigenschaft, die Sie Ihrem div hinzufügen, ist rechtfertigen-Inhalt, dessen Wert auf festgelegt ist Center so:

div.center {
 Anzeige: Flex;
 justify-content: center;
}

3. Verwenden Sie das veraltete Center-Element

Best Practices für das Web empfehlen Ihnen, CSS für die Gestaltung und HTML für die Semantik zu verwenden, daher sollten Sie diese HTML-Methode nicht verwenden. Das Center -Tag, das seinen Inhalt horizontal zentriert, ist in HTML5 veraltet.

Aber wenn es sein muss, hier ist, wie man ein Bild nur mit HTML zentriert. Einfach einpacken Bild Tag in einem zentralen Tag wie folgt:

So richten Sie Ihre Bilder in HTML aus

Wir haben Ihnen drei verschiedene, einfach anzuwendende Methoden zum Zentrieren Ihrer Bilder in einem HTML-Dokument gezeigt. Probieren Sie sie alle aus und wählen Sie diejenige aus, die für Sie am besten funktioniert. Vermeiden Sie die dritte Methode, es sei denn, Sie haben absolut keine Wahl!

Beachten Sie, dass es noch einige weitere Möglichkeiten gibt, Bilder mit HTML und CSS zu zentrieren. Eine gängige Methode, die sowohl für Text als auch für Inline-Bilder funktioniert, ist die Textausrichtung Eigentum.

So zentrieren Sie Text auf Ihrer Webseite mit CSS

Lesen Sie weiter

Über den Autor