Möchten Sie wissen, wie Zentrieren Sie ein Bild in einem DIV? Das Zentrieren eines Bildes in einem DIV kann nützlich sein, um das Erscheinungsbild und die Organisation Ihrer Webseite zu verbessern und das Bild hervorzuheben, das Sie anzeigen möchten. Zentrieren Sie ein Bild in einem DIV ist nicht schwierig, aber es hängt von mehreren Faktoren wie Bildtyp, DIV-Größe, DIV-Stil usw. ab.
In diesem Artikel werden wir erklären wie man ein Bild in einem DIV mit HTML und CSS zentriert, das sind die Programmiersprachen, die zum Erstellen und Entwerfen von Webseiten verwendet werden. Wir zeigen Ihnen verschiedene Methoden und Beispiele, damit Sie die für Sie am besten geeignete auswählen können.
Was ist ein DIV?
Ein div ist ein HTML-Element, das verwendet wird Erstellen Sie Abschnitte oder Container auf einer Webseite. Dies kann weitere Elemente wie Text, Bilder, Links usw. enthalten. Darüber hinaus handelt es sich um ein Blockelement, was bedeutet, dass es die gesamte Breite der Seite einnimmt Sie können seine Höhe und Breite definieren. Ein div ist ein generisches Element, das heißt, es hat keine spezifische semantische Bedeutung. Aus diesem Grund wird es normalerweise mit den Klassen- oder ID-Attributen verwendet, um dem Div einen Namen oder eine Kategorie zu geben. Es wird auch oft mit verwendet style-Attribut oder mit CSS-Stylesheets, um dem Div ein Aussehen oder Layout zu geben.
Ein div wird verwendet, um den Inhalt einer Webseite zu organisieren und zu strukturieren und um Stileigenschaften darauf anzuwenden. Mit einem div können Sie eine Box erstellen, die andere Elemente enthält und die ausgerichtet, zentriert, gefärbt, schattiert usw. sein kann. Das Format kann auch dazu verwendet werden Erstellen Sie Spalten oder Zeilen, um die Inhalte geordnet und flexibel zu verteilen. Im Allgemeinen können damit auch visuelle oder interaktive Effekte wie Animationen, Übergänge, Transformationen usw. erstellt werden.
So zentrieren Sie ein Bild horizontal
Zentrieren Sie ein Bild horizontal in einem DIV bedeutet, das Bild in der Mitte auszurichten der Breite des DIV. Es gibt mehrere Möglichkeiten, dies zu tun, die gebräuchlichsten sind jedoch die folgenden:
- Verwenden Sie die Eigenschaft text-align:center. Diese Eigenschaft wird auf das DIV-Element angewendet und bewirkt, dass alle Elemente innerhalb des DIV horizontal zentriert ausgerichtet werden. Zum Beispiel:
- Verwenden Sie die Eigenschaft margin: auto. Diese Eigenschaft wird auf das IMG-Element angewendet und bewirkt, dass das Bild links und rechts die gleichen Ränder hat, wodurch es horizontal zentriert wird. Damit es funktioniert, muss das Bild eine definierte Breite haben und vom Typ Block sein oder über die Eigenschaft display:block verfügen. Zum Beispiel:
- Verwenden Sie die Transformationseigenschaft: translatorX(). Diese Eigenschaft wird auf das IMG-Element angewendet und bewirkt, dass sich das Bild horizontal um einen bestimmten Abstand von seiner ursprünglichen Position bewegt. Um es horizontal zu zentrieren, müssen Sie es um 50 % seiner Breite nach rechts verschieben. Damit es funktioniert, muss das Bild eine definierte Breite haben und vom Typ Block sein oder über die Eigenschaft display:block verfügen. Zum Beispiel:
So zentrieren Sie ein Bild vertikal
Zentrieren Sie ein Bild vertikal in einem DIV bedeutet, das Bild in der Mitte der Höhe des DIV auszurichten. Es gibt mehrere Möglichkeiten, dies zu tun, die gebräuchlichsten sind jedoch die folgenden:
- Verwenden Sie die Eigenschaft „vertikal-align: middle“.. Diese Eigenschaft wird auf das IMG-Element angewendet und bewirkt, dass das Bild vertikal in Bezug auf die Textgrundlinie zentriert wird. Damit dies funktioniert, muss das DIV-Element eine definierte Höhe haben und das IMG-Element muss vom Typ Inline sein oder über die Eigenschaft display:inline verfügen. Zum Beispiel:
- Verwenden der Eigenschaften „margin-top“ und „margin-bottom“.. Diese Eigenschaften werden auf das IMG-Element angewendet und bewirken, dass das Bild oben und unten die gleichen Ränder hat, wodurch es vertikal zentriert wird. Damit dies funktioniert, muss das DIV-Element eine definierte Höhe haben und das IMG-Element muss eine definierte Höhe haben und vom Typ Block sein oder über die Eigenschaft display:block verfügen. Zum Beispiel:
- Verwenden Sie die Transformationseigenschaft: TranslateY(). Dieses Mal wird es auf das IMG-Element angewendet und bewirkt, dass sich das Bild vertikal um eine bestimmte Distanz von seiner ursprünglichen Position bewegt. Um es vertikal zu zentrieren, müssen Sie es um 50 % seiner Höhe nach unten bewegen. Damit dies funktioniert, muss das DIV-Element eine definierte Höhe haben und das IMG-Element muss eine definierte Höhe haben und vom Typ Block sein oder über die Eigenschaft display:block verfügen. Zum Beispiel:
So zentrieren Sie ein Bild auf beiden Achsen
Zentrieren eines Bildes auf beiden Achsen in einem DIV-Mittel Richten Sie das Bild sowohl in der Breite als auch in der Höhe in der Mitte aus der DIV ist dies die komplexeste. Es gibt mehrere Möglichkeiten, dies zu tun, die gebräuchlichsten sind jedoch die folgenden:
- Verwenden Sie die Eigenschaft text-align: center und die Eigenschaft Vertical-align: middle. Diese Eigenschaften gelten jeweils für das DIV-Element und das IMG-Element und bewirken, dass das Bild sowohl horizontal als auch vertikal zentriert wird. Damit dies funktioniert, muss das DIV-Element eine definierte Höhe haben und das IMG-Element muss vom Typ Inline sein oder über die Eigenschaft display:inline verfügen. Zum Beispiel:
- Verwenden Sie die Eigenschaft margin: auto. Hier wird es auf das IMG-Element angewendet und sorgt dafür, dass das Bild auf allen vier Seiten die gleichen Ränder hat, wodurch es auf beiden Achsen zentriert wird. Damit dies funktioniert, muss das DIV-Element eine definierte Höhe haben und das IMG-Element muss eine definierte Breite und Höhe haben und vom Typ Block sein oder über die Eigenschaft display:block verfügen. Zum Beispiel:
- Verwenden Sie die Eigenschaft transform:translate(). In diesem Fall wird es auf das IMG-Element angewendet und bewirkt, dass sich das Bild in beiden Achsen um eine bestimmte Distanz von seiner ursprünglichen Position bewegt. Um es zu zentrieren, müssen Sie es um 50 % seiner Breite nach rechts und 50 % seiner Höhe nach unten verschieben. Damit dies funktioniert, muss das DIV-Element eine definierte Höhe haben und das IMG-Element muss eine definierte Breite und Höhe haben und vom Typ Block sein oder über die Eigenschaft display:block verfügen. Zum Beispiel:
Zentrieren Sie jedes Bild
Das Zentrieren eines Bildes in einem DIV kann nützlich sein um das Erscheinungsbild und die Organisation Ihrer Website zu verbessern, und um das Bild hervorzuheben, das Sie anzeigen möchten. Das Zentrieren eines Bildes in einem DIV ist nicht schwierig, hängt jedoch von mehreren Faktoren ab, wie z. B. der Art des Bildes, der Größe des DIV, dem Stil des DIV usw.
In diesem Artikel Wir haben erklärt, wie man mit HTML und CSS ein Bild in einem DIV zentriert, das sind die Programmiersprachen, die zum Erstellen und Entwerfen von Webseiten verwendet werden. Wir haben Ihnen verschiedene Methoden und Beispiele gezeigt, damit Sie wählen können derjenige, der am besten zu Ihnen passt.
Wir hoffen, dass Ihnen dieser Artikel gefallen hat und Sie gelernt haben, wie man ein Bild in einem DIV zentriert. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie uns einen Kommentar. Sie können diesen Artikel auch mit Ihren Freunden oder Ihrer Familie teilen, denen der Artikel ebenfalls gefällt HTML oder CSS. Machen wir uns an die Arbeit und programmieren!