Maison > Article > interface Web > Comment centrer les images en HTML ?

Comment centrer les images en HTML ?

青灯夜游original: 2020-04-21 14:34:4321392parcourir

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.

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>

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;
}

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%);
}

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>

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;
}

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!

safari html webkit display position margin transform flex table

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：Qu'est-ce que la balise

?Article suivant：Qu'est-ce que la balise

Articles Liés

Voir plus