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

【问题标题】：How to align an image to the center using Javascript?如何使用Javascript将图像与中心对齐？
【发布时间】：2013-02-10 03:31:28
【问题描述】：

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

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

【问题讨论】：

给它一个边距：0 auto;
为什么不简单地在 HTML 中包含一个具有适当属性的 img 元素？
我没有包含所有的脚本文件...其中还有一些其他逻辑使得从 .js 显示是必要的
我想我只是用具有普通 img 标签的 document.write() 替换了我原来的 JavaScript 函数。我希望这是合适的，我认为它解决了同样的问题

标签： javascript html alignment image

【解决方案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>

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

为什么要 +1？例如，我使用 JavaScript 搜索解决方案

【解决方案4】：

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

【讨论】：