Comment centrer les images en HTML ?-tutoriel HTML-php.cn

Comment centrer les images en HTML ?

青灯夜游

Libérer： 2020-05-12 18:16:29

original

21525 Les gens l'ont consulté

Comment centrer les images en HTML ? L’article suivant vous le présentera. 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 sera utile à tout le monde.

Comment centrer les images en HTML ?

Il existe de nombreuses façons de centrer l'image. Elle est considérée comme la base du HTML. Voici quelques méthodes à vous présenter.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			border: 3px solid skyblue;
		}
		</style>
	</head>
	<body>
		<div>
			<img  src="1.jpg"    style="max-width:90%" / alt="Comment centrer les images en HTML ?" >
		</div>
	</body>
</html>

Copier après la connexion

Rendu du code ci-dessus :

Comment centrer les images en HTML ?

Méthode 1 :

img{
	position: relative;
	left: 50%;
	top: 50%;
	margin: -60px 0 0 -75px;
}

Copier après la connexion

Donner la balise img Définir la position positionnement, position : relative, gauche : 50 % ; haut : 50 % signifie respectivement déplacer l'élément vers la droite de la moitié de la largeur du conteneur parent et vers le bas de la moitié de la hauteur du conteneur parent, car la distance parcourue est basé sur le conteneur parent Il s'agit de la distance standard mi-hauteur-largeur, et l'effet est le suivant :

Comment centrer les images en HTML ?

Parce que cette image est plus grande, elle dépasse la portée du div. . .

Après cela, vous devez reculer l'img pour que l'élément img puisse être affiché au centre. Marge : -60px 0 0 -75px fait référence au déplacement de l'élément img de 75px vers la gauche et de 60px vers le haut. (en raison du matériel d'image utilisé, la largeur et la hauteur sont de 150*120), afin que l'image puisse être centrée.

Comment centrer les images en HTML ?

Méthode 2 :

img{
	position: relative;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

Copier après la connexion

En fait, cela est similaire à la méthode ci-dessus, mais je pense personnellement que cela comparaison Pratique, car la première méthode a un problème, c'est-à-dire que la valeur de la marge doit changer avec la taille de l'élément img. Peu importe si les éléments img ont tous la même taille, mais cette exigence est un peu élevée.

Cette méthode utilise la transformation 2D, transform:translate (valeur de mouvement sur l'axe x, valeur de mouvement sur l'axe y). L'avantage de cette méthode est qu'il n'est pas nécessaire de mesurer la largeur et la hauteur de l'élément img). et définissez directement le pourcentage, dans transform: translate(), le pourcentage utilisé est en fait relatif à la largeur et à la hauteur de l'élément lui-même.

Méthode 3 :

Définir comme conteneur parent à deux niveaux, définir display: table au premier niveau et convertir le conteneur parent de premier niveau dans un type de tableau. Après

, définissez display: table-cell au deuxième niveau, qui est le conteneur parent de img

Définissez text-align: center dans le parent de premier niveau. conteneur,

Réglage de l'alignement vertical : milieu au deuxième niveau peut atteindre l'objectif de centrer l'image

Méthode 4 :

Définissez l'alignement des axes principal et latéral

<div class="a">
	<img  src="img/MEIZU.png"  alt="Comment centrer les images en HTML ?" >
</div>

Copier après la connexion

div.a{
	width: 600px;
	height: 200px;
	border: 1px solid saddlebrown;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
div.a img{
	border: 1px solid red;
}

Copier après la connexion

Définissez display: flex sur le conteneur parent pour convertir le conteneur parent en boîte télescopique, car cela est nécessaire pour appliquer l'alignement des axes principal et latéral. . . .

Ensuite, définissez l'alignement de l'axe principal sur justification-content: space-around;

Remarque : Internet Explorer 10 et les navigateurs antérieurs ne prennent pas en charge l'attribut justifier-content.

Remarque : Safari 6.1 et versions ultérieures prennent en charge cette propriété via la propriété -webkit-justify-content.

Ensuite, définissez l'alignement transversal du conteneur parent, align-items: center;

Remarque : Internet Explorer 10 et les navigateurs antérieurs ne prennent pas en charge l'attribut align-items.

Remarque : Safari 7.0 et versions ultérieures prennent en charge cette propriété via la propriété -webkit-align-items.

Que voyez-vous ? L'image est déjà centrée.

Si Internet Explorer 10 et les navigateurs antérieurs ne le prennent pas en charge, cette méthode serait en fait la plus appropriée.

Tutoriel recommandé : Tutoriel HTML

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!