Maison > Article > interface Web > Comment centrer l'image en javascript

Comment centrer l'image en javascript

青灯夜游original: 2022-01-19 11:47:326542parcourir

Méthode : 1. Enveloppez l'image avec div et span ; 2. Utilisez setAttribute() pour ajouter les styles "display:table;text-align:center" et "display:table-cell;vertical-align:middle;" il.

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Comment définir le centrage d'une image en javascript :

Créez un framework HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div {
				width: 500px;
				height: 200px;
				border: green solid 1px;
			}
		</style>
	</head>
	<body>

		<div id="app">
			<span id="img">
				<img  src="img/1.jpg"    style="max-width:90%" / alt="Comment centrer l'image en javascript" >
			</span>
		</div>
	</body>
</html>

Comment centrer limage en javascript

Utilisez la méthode setAttribute() pour ajouter un style de centrage d'image

var div=document.getElementById("app");
var img=document.getElementById("img");
div.setAttribute("style","display:table;text-align: center;");
img.setAttribute("style","display:table-cell;vertical-align: middle;");

Comment centrer limage en javascript

[Recommandations associées : javascript apprentissage tutoriel 】

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：Javascript peut-il ajouter des balises ?Article suivant：Javascript peut-il ajouter des balises ?

Articles Liés

Voir plus