So schreiben Sie CSS-Div-Zentrierungscode für Bilder-Front-End-Fragen und Antworten-php.cn

So schreiben Sie CSS-Div-Zentrierungscode für Bilder

藏色散人

Freigeben： 2023-01-04 09:38:31

Original

2927 Leute haben es durchsucht

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.

So schreiben Sie CSS-Div-Zentrierungscode für Bilder

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

Das Ergebnis ist wie in der folgenden Abbildung dargestellt:

So schreiben Sie CSS-Div-Zentrierungscode für Bilder

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>

Nach dem Login kopieren

Das Ergebnis ist in der folgenden Abbildung dargestellt:

So schreiben Sie CSS-Div-Zentrierungscode für Bilder

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!