Maison > Article > interface Web > Img en CSS ne connaît pas la largeur et la hauteur, comment réaliser le centrage

Img en CSS ne connaît pas la largeur et la hauteur, comment réaliser le centrage

青灯夜游original: 2022-09-22 17:28:222238parcourir

3 méthodes : 1. Utilisez l'attribut text-align pour définir "text-align: center;" sur l'élément parent contenant img. 2. Utilisez la disposition de la boîte flexible et définissez "display: flex;justify-content: center;" sur l'élément parent. 3. Utilisez la disposition en grille et définissez "display:grid;align-items:center;justify-items:center;" sur l'élément parent.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Méthode 1 : utilisez l'attribut d'alignement du texte text-align

text-align pour contrôler l'alignement des lignes de texte dans l'élément. Vous pouvez définir un div parent pour img, afin que img puisse être le texte du div, puis utiliser text-align pour modifier les attributs div. (Ajoutez des attributs à l'élément parent)

Remarque : L'élément enfant doit être en ligne ou en ligne-bloc ; si l'élément enfant est également un div, vous devez définir display : inline/inline-block pour l'élément enfant. L'élément img ici est en ligne, alors omettez cette étape. Cette méthode convient aux éléments en ligne, tels que le centrage de img

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			#pic {
				border: 1px solid red;
			    text-align: center;   /*表示div的子元素居中*/
			}
		</style>
	</head>

	<body>

		 <div id="pic">
		        <img  src="img/2.jpg" class="logo" alt="Img en CSS ne connaît pas la largeur et la hauteur, comment réaliser le centrage" >
		 </div>

	</body>
</html>

Img en CSS ne connaît pas la largeur et la hauteur, comment réaliser le centrage

Méthode 2 : Utiliser une disposition de boîte flexible

css

#pic {
    display: flex;   
    justify-content: center;
}

Img en CSS ne connaît pas la largeur et la hauteur, comment réaliser le centrage

La disposition de boîte flexible peut utiliser quelques lignes de CSS pour réaliser presque tout la mise en page. Et le plus étonnant est que même les deux premières rangées de n images peuvent être centrées, sans avoir à prendre en compte la disposition et la position de l'image.

Méthode 3 : Utiliser la disposition en grille

Les boîtes flexibles sont les plus couramment utilisées dans les barres de navigation. En revanche, la disposition en grille est un système de disposition universel.

#pic {
    display: grid;   
    align-items: center;     /*块级方向（纵向）上的全部栅格元素居中对齐*/
    justify-items: center;  /*行内方向（横向）所有的元素中线对齐*/
}

Img en CSS ne connaît pas la largeur et la hauteur, comment réaliser le centrage

Il peut donc gérer très facilement le problème de l'alignement de plusieurs images.

(Partage de vidéos d'apprentissage : front-end web)

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：Quel est le rôle du CSS dans le WebArticle suivant：Quel est le rôle du CSS dans le Web

Articles Liés

Voir plus