So schreiben Sie den Bild-CSS-Div-Zentrierungscode: Stellen Sie zuerst die Anzeige auf Tabellenzelle ein. Stellen Sie dann die horizontale Zentrierung auf Textausrichtung auf Mitte ein.
Die Betriebsumgebung dieses Tutorials: Dell G3-Computer, Windows 7-System, HTML5- und CSS3-Version.
Empfohlen: „CSS-Video-Tutorial“
Körperstruktur
<body> <div> <img src="1.jpg" alt="haha"> </div> </body>
Methode eins:
Stellen Sie die Anzeige auf Tabellenzelle ein, stellen Sie dann die Textausrichtung auf „Mitte“ für horizontale Zentrierung und die vertikale Ausrichtung auf „Mitte“ für vertikale Zentrierung ein .
<style type="text/css">
*{margin: 0;padding: 0;}
div{
width:150px;
height: 100px;
display: table-cell;
vertical-align: middle;
text-align: center;
border:1px solid #000;
}
img {
width: 50px;
height: 50px;
}
</style>Das Ergebnis ist wie in der folgenden Abbildung dargestellt:
Methode 2:
Erzielt durch Positionspositionierung. Stellen Sie das Div auf relative Positionierung und das Bild auf absolute Positionierung ein, links: 50 %, oben: 50 %. Zu diesem Zeitpunkt befindet sich die obere linke Ecke des Bildes in der Mitte des Div Wenn sich das Bild in der Mitte des Div befindet, müssen Sie es positionieren. Verschiebt das Bild um die halbe Höhe nach oben und die halbe Breite nach links.
<style type="text/css">
*{margin: 0;padding:0;}
div{
width:150px;
height: 100px;
position: relative;
border:1px solid #000;
}
img {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px; /* 高度的一半 */
margin-left: -25px; /* 宽度的一半 */
}
</style>Das Ergebnis ist in der folgenden Abbildung dargestellt:
Methode 3: Sie kann verwendet werden, wenn die tatsächliche Breite und Höhe des Bildes oder Elements unklar ist
oder sie kann durch Positionierung erreicht werden. Stellen Sie das Div auf relative Positionierung und das Bild auf absolute Positionierung ein, links: 50 %, oben: 50 %. Zu diesem Zeitpunkt befindet sich die obere linke Ecke des Bildes in der Mitte des Div Wenn sich das Bild in der Mitte des Div befindet, müssen Sie es verschieben. Verschieben Sie die Hälfte der Bildhöhe nach oben und die Hälfte der Bildbreite nach links. Wenn Sie die Breite und Höhe des Elements nicht kennen, können Sie Folgendes verwenden transform: translator(-50%,-50%);
<style type="text/css">
*{margin: 0;padding:0;}
div{
width:150px;
height: 100px;
position: relative;
border:1px solid #000;
}
img {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>Methode 4:
<style type="text/css">
*{margin: 0;padding:0;}
div{
width:150px;
height: 100px;
position: relative;
border:1px solid #000;
}
img {
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>Methode 5: Flexible Layout-Flexibilität
<style type="text/css">
*{margin: 0;padding:0;}
div{
width:150px;
height: 100px;
border:1px solid #000;
display: flex;
justify-content: center;
align-items: center;
}
img {
width: 50px;
height: 50px;
}
</style>Der Effekt ist der gleiche, ich hoffe, er kann allen helfen!
Das obige ist der detaillierte Inhalt vonSo schreiben Sie CSS-Div-Zentrierungscode für Bilder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
