Центрировать изображение внутри div в HTML

Question

Центрировать изображение внутри div в HTML

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;

В настоящее время это не работает.

Здесь вы можете проверить это самостоятельно. Обратите внимание, что все javascript-настройки css необходимы и НЕ МОГУТ быть помещены внутри встроенного текста. Поэтому, пожалуйста, не делайте этого как решение. Благодарю!! Из этого примера видно, что граница находится вокруг изображения, а не 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>

CodeGuy 22 сен. 2013, в 06:49

Источник

Теги:

html

1 ответ

Ещё вопросы

anupam · Answer 1 · 2013-09-22T02-53-00.000Z

С точки зрения 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>

Но теперь, если я поставлю границу вокруг круга circle1, например, граница заканчивается только вокруг изображения, а не всего div
Также ... text-align только выравнивает его по горизонтали
Пожалуйста, смотрите мой отредактированный код с добавлением document.getElementById ("circle1img"). Style.padding = 5;