3 Möglichkeiten, CSS-Positionierung zum Zentrieren von IMG-Bildern zu verwenden (Codebeispiele)-CSS-Tutorial-php.cn

3 Möglichkeiten, CSS-Positionierung zum Zentrieren von IMG-Bildern zu verwenden (Codebeispiele)

青灯夜游

Freigeben： 2018-10-19 12:01:41

Original

10768 Leute haben es durchsucht

Wie zentriere ich das IMG-Bild mit CSS? Im vorherigen Artikel [Wie zentriere ich das IMG-Bild in CSS? Wir haben die beiden Methoden zur Verwendung des Anzeigeattributs zum Zentrieren des Bilds im CSS-Anzeigeattribut eingeführt, um eine Bildzentrierung zu erreichen. In diesem Artikel stellen wir Ihnen drei Methoden (Codebeispiele) vor, mit denen Sie die Positionspositionierung von CSS verwenden können, um die Bildzentrierung zu erreichen Bild. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

1. Stellen Sie die CSS-Positionierung so ein, dass das IMG-Bild zentriert wird, und kennen Sie die Breite und Höhe des IMG-Bildes

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>img图片居中</title>
		<style>
			*{margin: 0;padding:0;}
			.demo{
				width: 400px;
		        height: 300px;
		        margin: 50px auto;
		        border: 1px dashed #000;
		        position: relative;
			}
			.demo img{
				width: 200px;
				height: 150px;
				position: absolute;
		        top: 50%;
		        left: 50%;
		        margin-top: -75px; /* 高度的一半 */
		        margin-left: -100px; /* 宽度的一半 */
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<img  src="3 Möglichkeiten, CSS-Positionierung zum Zentrieren von IMG-Bildern zu verwenden (Codebeispiele)" / alt="3 Möglichkeiten, CSS-Positionierung zum Zentrieren von IMG-Bildern zu verwenden (Codebeispiele)" >
		</div>
	</body>
</html>

Nach dem Login kopieren

Rendering:

3 Möglichkeiten, CSS-Positionierung zum Zentrieren von IMG-Bildern zu verwenden (Codebeispiele)

Anleitung:

Stellen Sie die Demobox auf relative Positionierung und das Bild auf absolute Positionierung ein, links: 50 %, oben: 50 % des Bildes befindet sich in der Mitte des Div.

3 Möglichkeiten, CSS-Positionierung zum Zentrieren von IMG-Bildern zu verwenden (Codebeispiele)

Wenn Sie möchten, dass das Bild zentriert ist, muss die Bildmitte mit der Mitte der Demobox übereinstimmen, Sie müssen also das Bild um die Hälfte nach oben verschieben Bildhöhe und nach links um die Hälfte der Bildbreite.

margin-top: -75px; /* 高度的一半 */
margin-left: -100px; /* 宽度的一半 */

Nach dem Login kopieren

3 Möglichkeiten, CSS-Positionierung zum Zentrieren von IMG-Bildern zu verwenden (Codebeispiele)

2. Die CSS-Positionierung legt fest, dass das Bild zentriert ist. Ich kenne die Breite und Höhe des Bildes nicht.

1) , CSS-Positionierung + Transformation, um das Bild zu realisieren. Zentriert

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>img图片居中</title>
		<style>
			*{margin: 0;padding:0;}
			.demo{
				width: 400px;
		        height: 300px;
		        margin: 50px auto;
		        border: 1px dashed #000;
		        position: relative;
			}
			.demo img{
				width: 200px;
				height: 150px;
				position: absolute;
		        top: 50%;
		        left: 50%;
		        transform: translate(-50%,-50%);
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<img  src="3 Möglichkeiten, CSS-Positionierung zum Zentrieren von IMG-Bildern zu verwenden (Codebeispiele)" / alt="3 Möglichkeiten, CSS-Positionierung zum Zentrieren von IMG-Bildern zu verwenden (Codebeispiele)" >
		</div>
	</body>
</html>

Nach dem Login kopieren

Effektbild:

3 Möglichkeiten, CSS-Positionierung zum Zentrieren von IMG-Bildern zu verwenden (Codebeispiele)

Anleitung:

Links setzen: 50 %, oben :50%, sodass die obere linke Ecke des Bildes zu diesem Zeitpunkt in der Mitte der Demobox liegt. Solange die Bildmitte mit der Mitte der Demobox übereinstimmt, kann das Bild zentriert werden . (Weitere Informationen finden Sie in Methode 1.)

Wie kann man also dafür sorgen, dass die Bildmitte mit der Mitte der Demobox übereinstimmt? Wir müssen das Bild um die halbe Bildhöhe nach oben und um die halbe Bildbreite nach links verschieben. Aber ich kenne die Breite und Höhe des Bildes nicht, was soll ich tun? Zu diesem Zeitpunkt verwenden wir

transform: Translate(-50%,-50%), um den gewünschten Effekt zu erzielen. 2), CSS-Positionierung + Rand, um das Bild zu zentrieren

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>img图片居中</title>
		<style>
			*{margin: 0;padding:0;}
			.demo{
				width: 400px;
		        height: 300px;
		        margin: 50px auto;
		        border: 1px dashed #000;
		        position: relative;
			}
			.demo img{
				width: 200px;
				height: 150px;
				position: absolute;
		        top: 0;
		        left: 0;
		        right: 0;
		        bottom: 0;
		        margin: auto;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<img  src="3 Möglichkeiten, CSS-Positionierung zum Zentrieren von IMG-Bildern zu verwenden (Codebeispiele)" / alt="3 Möglichkeiten, CSS-Positionierung zum Zentrieren von IMG-Bildern zu verwenden (Codebeispiele)" >
		</div>
	</body>
</html>

Nach dem Login kopieren

Rendering:

3 Möglichkeiten, CSS-Positionierung zum Zentrieren von IMG-Bildern zu verwenden (Codebeispiele) Anleitung:

Stellen Sie das Demo-Feld auf relative Positionierung und das Bild auf absolute absolute Positionierung ein, oben: 0, links: 0, rechts: 0, unten: 0. Zu diesem Zeitpunkt stimmt die obere linke Ecke des Bildes mit der oberen überein linke Ecke der Demo-Box:

3 Möglichkeiten, CSS-Positionierung zum Zentrieren von IMG-Bildern zu verwenden (Codebeispiele) Mit

margin: auto;

können Sie das IMG-Bild horizontal und vertikal relativ zur Demo-Box zentrieren der bildzentrierende Effekt. Zusammenfassung: Das Obige ist eine vollständige Einführung in die drei Methoden zur Verwendung von CSS-Positionierung zum Zentrieren von IMG-Bildern. Ich hoffe, dass es für das Lernen aller hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter

CSS3-Video-Tutorial

, Html5-Video-Tutorial , Bootstrap-Video-Tutorial !

Das obige ist der detaillierte Inhalt von3 Möglichkeiten, CSS-Positionierung zum Zentrieren von IMG-Bildern zu verwenden (Codebeispiele). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!