So zentrieren Sie Bilder mithilfe von CSS vertikal in Divs

Dieser Artikel stellt hauptsächlich vor, wie man Bilder in Divs mithilfe von CSS vertikal zentriert. Er hat einen gewissen Referenzwert und ich hoffe, er kann jedem helfen.

Wir arbeiten normalerweise an Seiten Wenn wir sie erstellen, stoßen wir oft auf Situationen, in denen wir aufgefordert werden, ein Bild in der Mitte eines Divs anzuzeigen, aber oft nicht wissen, wie das geht. Heute werden wir einige häufig verwendete CSS-Codes vorstellen, um eine vertikale Zentrierung von Bildern zu erreichen divs

HTML-Code

<div>
	<img src="images/1.jpg">
</div>

Methode 1

Verwenden Sie Position und Rand, um

Erlauben Sie die Untergeordnete Elemente durch Festlegen des absoluten Positionierungsattributs auf das übergeordnete Element. Positionierung relativ zu div

relativ bedeutet, die ursprüngliche Position für die Positionierung beizubehalten und Positionierung relativ zu ihrer eigenen ursprünglichen Position

absolut bedeutet Positionierung weg von der Originalposition und Positionierung relativ zum nächsten positionierten übergeordneten Element. Wenn kein positioniertes übergeordnetes Element vorhanden ist, wird es relativ zum Dokument positioniert.

Hinweis: Um oben, unten, links und rechts zu erstellen des untergeordneten Elements 0, dann set margin: auto Es wird automatisch vertikal zentriert

Der Code lautet wie folgt

div{
	width:200px;
	height:200px;
	border: 1px solid #ccc;
	position: relative;//父元素设置绝对定位
}
img{
    position: absolute;//相对定位
	width:80px;
	height:50px;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;//使其垂直居中
	}

Rendering

Methode 2

Verwenden Sie die drei Attribute von display: table-cell; Vertical-align: middle; text-align: center, um <🎜 zu realisieren >

display:table-cell: wird als Tabellenzellenanzeige verwendet (ähnlich wie und )

vertical-align: middle; legt die vertikale Ausrichtung fest, anwendbar auf die Zeile -level elements

text-align: center: Legt die horizontale Ausrichtung von Text innerhalb von Elementen auf Blockebene fest, indem sie den Punkt angibt, an dem das Linienfeld ausgerichtet wird.

div{
        width:200px;
        height: 200px;
        margin:300px auto;
        display: table-cell;//作为一个表格单元格显示
        vertical-align: middle;//设置垂直对齐方式
        text-align: center;//设置水平对其方式
        border:1px solid #ccc;
    }
     img {
        width:80px;
        height:50px;
    }

Rendering

Methode 3

Position und Rand verwenden – Implementierung of top und margin-left

Bei dieser Methode sollte auf die Einstellung der Werte „margin-top“ und „margin-left“ geachtet werden. Sie sollten auf die halbe Höhe und Breite des Elements eingestellt werden. und beide sollten negative Werte sein

Margin-top: -40px bedeutet beispielsweise, dass das Element 40 Pixel nach oben von der oberen Grenze entfernt ist, und margin-top: 40px bedeutet, dass es 40 Pixel nach unten vom oberen Grenzelement entfernt ist

div{
	width:200px;
	height:200px;
	border: 1px solid #ccc;
	position: relative;
}
img{
	position: absolute;
	width:80px;
	height: 50px;
	top:50%;
	left:50%;
	margin-top: -40px;//向上40px
	margin-left: -25px;//向左25px

}

Rendering

Zusammenfassung: Es gibt viele Möglichkeiten, CSS zu verwenden, um Bilder in Divs vertikal zu zentrieren. Die oben genannten sind die drei Methoden, die ich habe Zusammenfassend können Sie den Rest gerne hinzufügen. Dieser Artikel kann jedem beim Erlernen des Seitenlayouts helfen.

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