Heim >Web-Frontend >CSS-Tutorial >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:3610781Durchsuche
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:  "1539916311440683 Möglichkeiten, CSS-Positionierung zum Zentrieren von IMG-Bildern zu verwenden (Codebeispiele)")
margin-top: -75px; /* 高度的一半 */ margin-left: -100px; /* 宽度的一半 */
<!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:
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:
 "1539915497904293 Möglichkeiten, CSS-Positionierung zum Zentrieren von IMG-Bildern zu verwenden (Codebeispiele)")
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:
Mit
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!