- Wie zentriere ich ein Bild horizontal in Div?
- Margin-Eigenschaft
- Flexbox-Modul
- Rasteransicht-Layout
- Positionsattribut
Wie zentriere ich ein Bild horizontal in Div?
Der Entwickler kann die Randeigenschaft, das Flexbox-Modul, das Rasteransicht-Layout und das Positionsattribut verwenden, um ein Bild im Div horizontal zu zentrieren. Befolgen Sie die nachstehende Anleitung, um das Bild im div-Tag horizontal zentriert auszurichten.
Nehmen wir an, es gibt ein Div, in dem das Bild auf diese Weise in der HTML-Datei platziert ist:
< div Klasse = 'Wurzel' >
< Bild src = '../book.jpg' Höhe = 'fünfzig%' Breite = 'fünfzig%' Klasse = 'Bild' >
< / div >
Das Bild erhält eine Breite und Höhe von 50 % und eine Klasse „Bild“.
Verwenden der Margin-Eigenschaft
Benutzer können mithilfe der Margin-Eigenschaft Platz um die HTML-Elemente hinzufügen. Es weist einen Rand zu, der dem verfügbaren Platz nach der Größenänderung des Fensterbildschirms entspricht. Setzt beispielsweise den linken und rechten Rand auf „Auto“ und die Anzeigeeigenschaft auf „Blockieren“:
Bild {
Bildschirmsperre;
margin-left: auto;
Rand rechts: auto;
}
Nach der Ausführung des obigen Beispiels sieht die Webseite folgendermaßen aus:
Die obige Ausgabe hat angezeigt, dass sich das Bild jetzt in der Mitte befindet.
Verwendung des Flexbox-Moduls
Der ' Flexbox „ist ein Modul, das einen vollständigen Satz von Eigenschaften enthält. Wählen Sie in unserem Fall die Stammelementklasse aus und verwenden Sie flex als Wert der Anzeigeeigenschaft. Legen Sie „center“ als Wert für „ fest. Rechtfertigungsinhalt ' Und ' align-items ' Eigenschaften:
.Wurzel {Anzeige: Flex;
rechtfertigen- Inhalt : Center;
align-items: center;
Hintergrund- Farbe : Blau;
}
Die Webseite sieht nach der Ausführung des Codes so aus:
Die obige Ausgabe zeigt, dass das Bild in der Mitte des Div angezeigt wird und die Hintergrundfarbe auf „Blau“ eingestellt ist.
Verwenden des Rasteransicht-Layoutmoduls
Das Layout der Rasteransicht besteht aus 12 Spalten, die Gesamtbreite ist auf 100 % eingestellt und jedes Element wird an einer bestimmten Position auf der Webseite platziert:
.Wurzel {Anzeige: Raster;
Ortselemente: Mitte;
}
Im obigen Codeausschnitt wird der Anzeigeeigenschaft der Wert „grid“ zugewiesen. Während „place-item“ als Abkürzung für die Eigenschaften „justify-content“ und „align-items“ verwendet wird:
Die Ausgabe bestätigt mithilfe der Rastermethode, dass sich das Bild in der Mitte des Div befindet:
Positionsattribut verwenden
Indem die Position der Stammklasse auf einen relativen Wert und der Bildklasse auf einen absoluten Wert festgelegt wird. Das Bild kann in der Mitte des Div angezeigt werden:
.Wurzel {Position: relativ;
}
.Bild {
Breite : 700px;
Höhe : 500px;
Position: absolut;
links: fünfzig %;
transformieren: TranslateX ( - fünfzig % ) ;
}
Das Bild wird nach links von „50 %“ verschoben und dann auf der X-Achse wieder auf „-50 %“ transformiert. Es zeigt das Bild horizontal in der Mitte des Div an:
Auf diese Weise kann das Bild horizontal im Div zentriert werden.
Abschluss
Um das Bild horizontal in einem div-Element festzulegen, verwenden Sie „ Rand “, „ Flexmodul “, „ Gitterstruktur ' Und ' Position ' Eigenschaften. Der ' Rand Die Eigenschaft „Links“ und „Rechts“ ist auf „Auto“ eingestellt. Das „Flex-Modul“ und das „Grid-Layout“ stellen die Anzeige auf „Flex“ bzw. „Grid“ ein und verwenden die Option „ Gegenstand platzieren „Eigenschaft zum Zentrieren des Bildes. Die Positionseigenschaft legt den Wert relativ zur Stammklasse und absolut zur Bildklasse fest und verwendet die Eigenschaften „left“ und „transform“. In diesem Blog wurde erfolgreich demonstriert, wie man Bilder in einem Div horizontal zentriert.