Comment centrer une image avec CSS ? L'attribut display de CSS implémente le centrage de l'image (exemple de code)-tutoriel CSS-php.cn

Comment centrer une image avec CSS ? L'attribut display de CSS implémente le centrage de l'image (exemple de code)

青灯夜游

Libérer： 2020-07-10 17:19:14

original

70774 Les gens l'ont consulté

Lorsque nous développerons la page front-end, afin de rendre la page belle, l'image sera centrée. Alors comment centrer l’image img avec CSS ? Cet article va vous montrer comment centrer l'image img avec CSS ? L'attribut display de css implémente le centrage de l'image (exemple de code), afin que chacun puisse comprendre et maîtriser les deux méthodes de définition de l'attribut display de css pour centrer l'image 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.

Tout d'abord, jetons un coup d'œil à l'attribut display et quelles sont les deux façons de centrer l'image ?

1. Utilisez la valeur de l'attribut table-cell de l'affichage, puis coopérez avec text-align: center; et vertical-align: middle; Définissez l'image pour qu'elle soit centrée

2. Définissez display: flex; et utilisez elastic layout flex pour définir le centrage de l'img image

Ci-dessous, à travers des exemples de code simples, apprenons-en davantage sur la façon dont ces deux méthodes réalisent le centrage de l'image.

1. Utilisez display:table-cell pour réaliser le centrage horizontal et vertical des images de balise img

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>img图片居中</title>
		<style>
			.demo{
				width: 400px;
		        height: 300px;
		        border: 1px dashed #000;
		        display: table-cell; /*主要是这个属性*/
		        vertical-align: middle;
		        text-align: center;
			}
			.demo img{
				width: 200px;
				height: 150px;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<img  src="Comment centrer une image avec CSS ? Lattribut display de CSS implémente le centrage de limage (exemple de code)" / alt="Comment centrer une image avec CSS ? L'attribut display de CSS implémente le centrage de l'image (exemple de code)" >
		</div>
	</body>
</html>

Copier après la connexion

Rendu :

Comment centrer une image avec CSS ? Lattribut display de CSS implémente le centrage de limage (exemple de code)

Remarque :

Le paramètre display: table-cell; dans la boîte de démonstration entraînera l'affichage de la boîte de démonstration sous forme de cellule de tableau (similaire à et ) . La définition de text-align: center; centrera l'image img horizontalement et la définition de vertical-align: middle centrera l'image img verticalement.

2. Flexibilité de mise en page flexible

<!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;
		        display: flex;
		        justify-content: center;
		        align-items: center;
			}
			.demo img{
				width: 200px;
				height: 150px;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<img  src="Comment centrer une image avec CSS ? Lattribut display de CSS implémente le centrage de limage (exemple de code)" / alt="Comment centrer une image avec CSS ? L'attribut display de CSS implémente le centrage de l'image (exemple de code)" >
		</div>
	</body>
</html>

Copier après la connexion

Rendu :

Comment centrer une image avec CSS ? Lattribut display de CSS implémente le centrage de limage (exemple de code)

Instructions :

Définir l'affichage : flex ; pour implémenter une disposition élastique flexible, définir justifier-content : centre ; pour aligner l'image horizontalement et au centre, et définir align-items : centre pour aligner l'image verticalement et au centre.

Résumé : ce qui précède est une introduction complète aux deux méthodes d'utilisation de l'attribut display du CSS pour centrer les images. 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!