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>
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;");
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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
