0

我有一个div，我想将图像在div 水平和垂直方向居中。我不想使用CSS page. 我想学习如何仅html使用 CSS 内联来做到这一点。

<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 自定义都是必需的，并且不能放在内联文本中。因此，请不要将此作为解决方案。谢谢！！从这个例子中你可以看到边框是在图像周围而不是在circle1div 周围。

<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>
4

1 回答 1

0

从 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>
于 2013-09-22T04:43:22.430 回答