使用JS水平无中心div

Question

我正在为我的研究生工作编写代码而我在使用改变更改内容（图片上传）的内容方面遇到了麻烦。

在我的脚本中，我创建<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';