Html 如何使用Javascript将图像与中心对齐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15059349/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to align an image to the center using Javascript?
提问by AlbatrossCafe
Forgive me, I am still new to Javascript/HTML/PHP. In my HTML code, I have a reference to a JavaScript function in a file DisplayImage.js:
原谅我，我还是 Javascript/HTML/PHP 的新手。在我的 HTML 代码中，我引用了文件 DisplayImage.js 中的 JavaScript 函数：
<body>
<div id="display_image" align="center">
<script type="text/javascript" src="DisplayImage.js"></script>
</div>
</body>
Where a section of the DisplayImage.js JavaScript code is:
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");
This JS function just displays whatever image I want to pass into it onto my page. My problem is, it is always left-aligned. I would like the image to be aligned in the center. I tried putting align="center" into the div tag in my HTML code but that doesn't work, so I am assuming you need to do this from the JS function.
这个 JS 函数只显示我想要传递到我的页面上的任何图像。我的问题是，它总是左对齐。我希望图像在中心对齐。我尝试将 align="center" 放入 HTML 代码中的 div 标记中，但这不起作用，所以我假设您需要从 JS 函数中执行此操作。
Can anyone help me make the image center-aligned here?
谁能帮我使图像在这里居中对齐？
回答by Elliot Bonneville
Adding the line img.style.margin = "0 auto";should do the trick.
添加该行img.style.margin = "0 auto";应该可以解决问题。
回答by slamborne
As the others have mentioned, use "margin: 0 auto;" on the img tag. However, the image needs to be set to "display: block;"
正如其他人提到的，使用“margin: 0 auto;” 在 img 标签上。不过图片需要设置为“display:block;”
#display_image > img {
display: block;
margin: 0 auto;
}
回答by Jay M
You can modify your div with a CSS style tag.
您可以使用 CSS 样式标签修改您的 div。
<div id="display_image" style="display:block; margin:0 auto;">
<script type="text/javascript" src="DisplayImage.js"></script>
</div>
If you're modifying more than one instance of this, change your CSS (embedded or external file)
如果您要修改不止一个实例，请更改您的 CSS（嵌入式或外部文件）
回答by GOD
<!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>
