1

原谅我，我还是 Javascript/HTML/PHP 的新手。在我的 HTML 代码中，我引用了 DisplayImage.js 文件中的 JavaScript 函数：

<body>
<div id="display_image" align="center">
    <script type="text/javascript" src="DisplayImage.js"></script>
</div>
</body>

DisplayImage.js JavaScript 代码的一部分在哪里：

function show_image(src, width, height, alt) {
    var img = document.createElement("img");
    img.src = src;
    img.width = width;
    img.height = height;
    img.alt = alt;
    document.body.appendChild(img);
}   

show_image("sample1.jpg", 900, 690, "sample image #1");

这个 JS 函数只是将我想要传递给它的任何图像显示到我的页面上。我的问题是，它总是左对齐的。我希望图像在中心对齐。我尝试将 align="center" 放入我的 HTML 代码中的 div 标记中，但这不起作用，所以我假设您需要从 JS 函数中执行此操作。

谁能帮我让图像在这里居中对齐？

4

4 回答 4

3

添加该行img.style.margin = "0 auto";应该可以解决问题。

于 2013-02-25T02:57:25.910 回答
1

正如其他人所提到的，使用“margin：0 auto;” 在 img 标签上。但是，图片需要设置为“display:block;”

#display_image > img {
    display: block;
    margin: 0 auto;
}

http://jsfiddle.net/slamborne/yffwN/

于 2013-02-25T02:59:01.997 回答
1

您可以使用 CSS 样式标签修改您的 div。

<div id="display_image" style="display:block; margin:0 auto;">
    <script type="text/javascript" src="DisplayImage.js"></script>
</div>

如果您要修改多个实例，请更改您的 CSS（嵌入式或外部文件）

于 2013-02-25T03:06:49.717 回答
1 
<!DOCTYPE html>
<head>
 <style>
    img.center {
        position: absolute;
        top: 50%;
        bottom: 50%;
        left: 50%;
        right: 50%;
        margin: auto;
    }
</style>

<script>

function ex() {
  var x = document.createElement("IMG")
  x.setAttribute("class", "center")
  x.setAttribute("src", "example.png");
  x.setAttribute("width", "50");
  x.setAttribute("height", "50");
  x.setAttribute("alt", "example");
  document.body.appendChild(x);
}

</script>
</head>
<body>
<button onclick="ex()">click</button>
</body>
</html>
于 2020-03-09T21:10:02.137 回答