Sie dürfen nicht wissen, wie die Bilder im Div horizontal und vertikal zentriert sind

Sie dürfen nicht wissen, wie die Bilder im Div horizontal und vertikal zentriert werden. Hier bietet der Editor fünf Zentrierungsmethoden.

Körperstruktur

	<p>
		<img  alt="Sie dürfen nicht wissen, wie die Bilder im Div horizontal und vertikal zentriert sind" >
	</p>

Methode 1:
Anzeige auf Tabellenzelle einstellen, dann text-align auf „center“ für horizontale Zentrierung und „vertikal-align“ auf „center“ für vertikale Ausrichtung einstellen Zentrierung.

<style>
	*{margin: 0;padding: 0;}
    p{
		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 folgt:

Methode 2:
Erreicht durch Positionspositionierung. Setzen Sie p auf relative Positionierung und img auf absolute Positionierung, links: 50 %, oben: 50 %. Zu diesem Zeitpunkt befindet sich die obere linke Ecke des Bildes in der Mitte von p Wenn sich das Bild in der Mitte von p befindet, müssen Sie das Bild um die halbe Bildhöhe nach oben und um die halbe Bildbreite nach links verschieben.

<style>
	*{margin: 0;padding:0;}
	p{
		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 wie folgt:

Methode 3: kann verwendet werden, wenn die wahre Breite und Höhe des Bildes oder Elements unklar ist
Dies wird immer noch durch Positionspositionierung erreicht. Stellen Sie p auf relative Positionierung und img auf absolute Positionierung ein, links: 50 %, oben: 50 %. Zu diesem Zeitpunkt befindet sich die obere linke Ecke des Bildes in der Mitte von p In der Mitte von p müssen Sie das Bild um die Hälfte der Bildhöhe nach oben und um die Hälfte der Bildbreite nach links verschieben. Wenn Sie die Breite und Höhe des Elements nicht kennen, können Sie transform: Translate( verwenden. -50%,-50%);

<style>
    *{margin: 0;padding:0;}
    p{
        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>
    *{margin: 0;padding:0;}
    p{
        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 Layoutflexibilität

<style>
    *{margin: 0;padding:0;}
    p{
        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, es kann allen helfen!

Dieser Artikel ist reproduziert von: https://blog.csdn.net/DreamFJ/article/details/68921957

Empfohlenes Tutorial: „HTML-Tutorial“

Das obige ist der detaillierte Inhalt vonSie dürfen nicht wissen, wie die Bilder im Div horizontal und vertikal zentriert sind. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!