HTML中的div格式中的中心圖像

我有一個div，我想將圖像放在div的水平和垂直方向的中心。我不想用CSS page。我想學習如何使用內聯CSS使用html。HTML中的div格式中的中心圖像

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

來源

2013-09-22 CodeGuy

ummmmmm，烏爾使用CSS ....'風格= 「位置：絕對;左：50％;頂部：50％」'只是直列..... –

這就是我的意思，我想做它內聯 – CodeGuy

相同的廢話...完全相同的css ...... –

從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-22 04:43:22 anupam

但現在，如果我把circle1 div的邊框，爲例如，邊框只在圖像周圍結束，而不是整個div – CodeGuy

向我們顯示您的HTML和CSS。 – anupam

查看更新後的問題 – CodeGuy

HTML中的div格式中的中心圖像

回答

相關問題