Question

原谅我，我还是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函数中执行此操作。

有人可以帮助我让图像在这里居中对齐吗？

Answer 1

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

Answer 2

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

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

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

Answer 3

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

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

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

Answer 4

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

如何使用Javascript将图像与中心对齐？

4 个答案: