Heim > Artikel > Web-Frontend > 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
display:table-cell: wird als Tabellenzellenanzeige verwendet (ähnlich wie b6c5a531a458a2e790c1fd6421739d1c und b4d429308760b6c2d20d6300079ed38e)vertical-align: middle; legt die vertikale Ausrichtung fest, anwendbar auf die Zeile -level elementsdiv{ 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-leftdiv{ 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!