0

があり、水平方向と垂直方向divの両方で画像を中央に配置したいと思います。使いたくありません。CSSインラインのみを使用してこれを行う方法を学びたいです。div CSS pagehtml

<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 に答える