Question

我有一个div，我希望将图像水平和垂直地放在div 中心。我不想使用CSS page。我想学习如何仅使用带有CSS内联的html来完成此操作。

<div id="circle1" style="position:absolute;">
    <img id="circle1img" style="position:absolute; left:50%; top:50%"/>
</div>

我按照以下方式在运行时设置div的位置和图像的大小：

var divW = randomInt(200,300);
var imgW = randomInt(20,120);
document.getElementById("circle1").width = divW;
document.getElementById("circle1").height = divW;
document.getElementById("circle1img).width = imgW;
document.getElementById("circle1img").height = imgW;

目前无效。

这是一个单独测试它的立场。请注意，css的所有javascript自定义都是必需的，不能放在内联文本中。所以请不要这样做作为解决方案。谢谢！！您可以从此示例中看到边框位于图像周围，而不是circle1 div。

<html>
<head>
</head>
<body>
<div id="circles" style="display:none">
    <div id="circle1" style="position:absolute; text-align:center;">
        <img id="circle1img"/>
    </div>
</div>
<script type="text/Javascript">

document.getElementById("circle1img").src = "37.png";
document.getElementById("circle1").style.left = "200px";
document.getElementById("circle1").style.top = "200px";
document.getElementById("circle1").style.border = "2px solid blue";

var divW = 200;
var imgW = 100;
document.getElementById("circle1").width = divW;
document.getElementById("circle1").height = divW;
document.getElementById("circle1img").width = imgW;
document.getElementById("circle1img").height = imgW;

document.getElementById("circles").style.display = "block";

</script>
</body>
</html>

Answer 1

从HTML的角度来看，它将是：

<div id="circle1" style="position:absolute; text-align:center;">
    <img id="circle1img" src="your_image_src_goeshere..." />
</div>

让我知道它是否解决了这个问题。

修改

<html> <head> </head> <body> <div id="circles" style="display:none"> <div id="circle1" style="position:absolute; text-align:center;"> <img id="circle1img"/> </div> </div> <script type="text/Javascript"> document.getElementById("circle1img").src = "37.png"; document.getElementById("circle1").style.left = "200px"; document.getElementById("circle1").style.top = "200px"; document.getElementById("circle1").style.border = "2px solid blue"; var divW = 200; var imgW = 100; document.getElementById("circle1").width = divW; document.getElementById("circle1").height = divW; document.getElementById("circle1img").width = imgW; document.getElementById("circle1img").height = imgW; document.getElementById("circle1img").style.padding = 5; document.getElementById("circles").style.display = "block"; </script> </body> </html>

在HTML中的div中的中心图像

1 个答案: