Heim > Artikel > Web-Frontend > So stellen Sie das Bild in Javascript auf die Mitte ein

So stellen Sie das Bild in Javascript auf die Mitte ein

青灯夜游Original: 2022-01-19 11:47:326587Durchsuche

Methode: 1. Umschließen Sie das Bild mit div und span; 2. Verwenden Sie setAttribute(), um die Stile „display:table;text-align:center“ und „display:table-cell;vertical-align:middle;“ hinzuzufügen Es.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

So legen Sie die Bildzentrierung in Javascript fest:

Erstellen Sie ein HTML-Framework

<!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="So stellen Sie das Bild in Javascript auf die Mitte ein" >
			</span>
		</div>
	</body>
</html>

So stellen Sie das Bild in Javascript auf die Mitte ein

Verwenden Sie die setAttribute()-Methode, um einen Bildzentrierungsstil hinzuzufügen

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;");

So stellen Sie das Bild in Javascript auf die Mitte ein

Javascript-Lernen Tutorial 】

Das obige ist der detaillierte Inhalt vonSo stellen Sie das Bild in Javascript auf die Mitte ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Kann Javascript Tags hinzufügen?Nächster Artikel：Kann Javascript Tags hinzufügen?

In Verbindung stehende Artikel

Mehr sehen