javascript - 使用JS水平居中没有宽度的div

Question

我正在编写我的毕业作品，但我无法将 div 与不断变化的内容(图片上传)居中。

在我的脚本中我创建了 <img id="uploaded">并将上传的图片插入其中，这个<img>插入 <div id="canvas"></div> .

在我的 CSS 中:

#canvas {
    position: absolute;
    left: 50%;
    z-index: 500;
}

我试过了:

var canvaswidth = document.getElementById('uploaded').width;

为了获得 img 宽度，我想添加一个负的左边距以使我的 div 居中。

我试过了:

document.getElementById('canvas').style.marginLeft = - canvaswidth / 2;

但这行不通。你能帮我让它工作吗？

Answer 1

你需要单位:

document.getElementById('canvas').style.marginLeft = - canvaswidth /2 + 'px';

但是，您可以使用“绝对居中”:

#canvas {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
}

只需将 width 设置为所需的值即可:

document.getElementById('canvas').style.width = canvaswidth + 'px';