So zentrieren Sie ein Bild vertikal in CSS

Wie zentriere ich das Bild im CSS? Wie zentriere ich ein Bild vertikal? Neulinge, die gerade mit CSS begonnen haben, sind möglicherweise nicht sehr vertraut damit. Lassen Sie uns zusammenfassen, wie man ein Bild in CSS vertikal zentriert.

Es gibt viele Möglichkeiten, Bilder vertikal zu zentrieren, einschließlich der folgenden drei Methoden

1. Verwenden Sie Flex, um Bilder vertikal zu zentrieren

In CSS können wir Flex verwenden, um eine vertikale Zentrierung zu erreichen, aber Flex ist keine gute Methode. Viele Browser unterstützen Flex jetzt nicht, wie z. B. IE8 und 9.

Zuerst müssen wir dem unterstützenden Bild ein Div hinzufügen, es mit einer Breite von 100 Pixel und einer Höhe von 100 Pixel definieren und einige grundlegende Attribute dafür definieren. Darunter legen wir das Anzeigeelement fest div in Flex umwandeln und dann das Attribut align-items: center zu einem anderen hinzufügen.

CSS-Code:

body{ background:#999}
.flexbox{width: 300px;height: 250px;background:#fff;display: flex;align-items: center}
.flexbox img{width: 100px;height: 100px;align-items: center;}

2. Verwenden Sie die Anzeige, um eine vertikale Zentrierung des Bildes zu erreichen

Zunächst müssen wir ein Div erstellen. und für das Bild Um den Stil von div festzulegen, können wir dem übergeordneten Element von img ein Diaplay mit dem Attribut table hinzufügen und das Anzeigeattribut im div, das das Bild enthält, auf table-cell setzen Um eine Zentrierung zu erreichen, müssen Sie das Div einfach in das Attribut „vertikal-align: middle“ ändern.

CSS-Code:

.tablebox{width: 300px;height: 250px;background: #fff;display: table}
#imgbox{display: table-cell;vertical-align: middle;}
#imgbox img{width: 100px}

3. Verwenden Sie die absolute Positionierung des Bildes, um

zu erreichen. Wir stellen das Div mit dem Bild so ein, dass es einen Hintergrund hat , und geben Sie relative Attribute zum übergeordneten Element von img hinzu, fügen Sie absolute und relative Attribute zu untergeordneten Elementen hinzu und setzen Sie den oberen Wert auf 50 %. Jetzt müssen wir einen negativen Rand-Top-Wert für das img-Element festlegen .

CSS-Code:

body{background: #ccc;}
.posdiv{width: 300px;height: 250px;background: #fff;position: relative; margin:0 auto}
.posdiv img{width: 100px;position: absolute;top: 50%;margin-top: -50px;}

Wir empfehlen die Verwendung der dritten der drei oben genannten Methoden. Die dritte Methode ist besser kompatibel und relativ einfach. Der Schwerpunkt liegt auf der Beherrschung der Methoden und Prinzipien.

Das Obige ist die vollständige Einführung zur vertikalen Zentrierung von Bildern mit CSS. Wenn Sie mehr über das CSS3-Tutorial erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie ein Bild vertikal in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!