Maison > Article > interface Web > 3 façons d'utiliser le positionnement CSS pour centrer les images img (exemples de code)

3 façons d'utiliser le positionnement CSS pour centrer les images img (exemples de code)

青灯夜游original: 2018-10-19 12:00:3610694parcourir

Comment centrer l'image img avec CSS ? Dans l'article précédent [Comment centrer l'image img en css ? Nous avons présenté les deux méthodes d'utilisation de l'attribut display pour centrer l'image dans l'attribut display du CSS afin d'obtenir le centrage de l'image. Dans cet article, nous vous présenterons 3 façons (exemples de code) d'utiliser le positionnement CSS pour réaliser le centrage de l'image des images img. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

1. Définissez le positionnement CSS de l'image img au centre et connaissez la largeur et la hauteur de l'image img

<!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 façons dutiliser le positionnement CSS pour centrer les images img (exemples de code)" / alt="3 façons d'utiliser le positionnement CSS pour centrer les images img (exemples de code)" >
		</div>
	</body>
</html>

Rendu :

3 façons dutiliser le positionnement CSS pour centrer les images img (exemples de code)

Instructions :

Réglez la boîte de démonstration sur le positionnement relatif et réglez l'image sur le positionnement absolu, gauche : 50 %, haut : 50 %. le coin supérieur gauche de l’image est situé au centre div.

3 façons dutiliser le positionnement CSS pour centrer les images img (exemples de code)

Si vous souhaitez que l'image soit centrée, le centre de l'image doit coïncider avec le centre de la boîte de démonstration, vous devez donc déplacer l'image vers le haut de la moitié du hauteur de l'image et à gauche de la moitié de la largeur de l'image.

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

3 façons dutiliser le positionnement CSS pour centrer les images img (exemples de code)

2. positionnement CSS pour définir l'image img pour qu'elle soit centrée, mais je ne connais pas la largeur et la hauteur de l'image img

1), positionnement css + transformation Centrer l'image

<!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 façons dutiliser le positionnement CSS pour centrer les images img (exemples de code)" / alt="3 façons d'utiliser le positionnement CSS pour centrer les images img (exemples de code)" >
		</div>
	</body>
</html>

Effet image :

3 façons dutiliser le positionnement CSS pour centrer les images img (exemples de code)

Instructions :

Définir à gauche :50 %, top:50%, let Le coin supérieur gauche de l'image est situé au centre de la boîte de démonstration à ce moment, tant que le centre de l'image coïncide avec le centre de la boîte de démonstration, l'image peut être centré. (Voir méthode 1 pour plus de détails)

Alors comment faire coïncider le centre de l'image avec le centre de la boîte de démonstration ? Nous devons déplacer l'image vers le haut de la moitié de la hauteur de l'image et vers la gauche de la moitié de la largeur de l'image. Mais je ne connais pas la largeur et la hauteur de l’image, que dois-je faire ? À ce stade, nous utilisons

transform: translate(-50%,-50%); pour obtenir l'effet souhaité.

2), positionnement css + marge pour centrer l'image

<!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 façons dutiliser le positionnement CSS pour centrer les images img (exemples de code)" / alt="3 façons d'utiliser le positionnement CSS pour centrer les images img (exemples de code)" >
		</div>
	</body>
</html>

Rendu :

3 façons dutiliser le positionnement CSS pour centrer les images img (exemples de code)

Instructions :

Réglez la boîte de démonstration sur le positionnement relatif et définissez l'image sur le positionnement absolu : absolu, haut : 0, gauche : 0, droite : 0, bas : 0. À ce moment, le coin supérieur gauche de l'image coïncide avec le coin supérieur gauche de la boîte de démonstration. ：

3 façons dutiliser le positionnement CSS pour centrer les images img (exemples de code)

Utilisez

margin: auto; pour centrer l'image img horizontalement et verticalement par rapport à la boîte de démonstration. pour obtenir l'effet de centrage de l'image.

Résumé : ce qui précède est une introduction complète aux trois méthodes d'utilisation du positionnement CSS pour centrer les images img. J'espère que cela sera utile à l'apprentissage de chacun. Pour plus de didacticiels connexes, veuillez visiter le

didacticiel vidéo CSS3 , didacticiel vidéo HTML5 , didacticiel vidéo bootstrap !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment bien apprendre le CSS ? Quels sont les secrets pour apprendre le CSSArticle suivant：Comment bien apprendre le CSS ? Quels sont les secrets pour apprendre le CSS

Articles Liés

Voir plus