Heim > Artikel > Web-Frontend > 3 Möglichkeiten, CSS-Positionierung zum Zentrieren von IMG-Bildern zu verwenden (Codebeispiele)

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

青灯夜游Original: 2018-10-19 12:00:3610581Durchsuche

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>

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; /* 宽度的一半 */

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>

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>

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!

Stellungnahme：

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

Vorheriger Artikel：Wie lernt man CSS gut? Was sind die Geheimnisse beim Erlernen von CSS?Nächster Artikel：Wie lernt man CSS gut? Was sind die Geheimnisse beim Erlernen von CSS?

In Verbindung stehende Artikel

Mehr sehen