Heim > Web-Frontend > HTML-Tutorial > 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 sind

烟雨青岚
Freigeben: 2020-07-01 11:35:22
nach vorne
2713 Leute haben es durchsucht

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

Das Ergebnis ist wie folgt:
Sie dürfen nicht wissen, wie die Bilder im Div horizontal und vertikal zentriert sind

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>
Nach dem Login kopieren

Das Ergebnis ist wie folgt:
Sie dürfen nicht wissen, wie die Bilder im Div horizontal und vertikal zentriert sind

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage