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

原谅我，我还是Javascript/HTML/PHP的新手。在我的HTML代码，我有一个文件DisplayImage.js对一个JavaScript函数的引用：如何使用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函数中执行此操作。

任何人都可以帮助我使图像中心对齐吗？

来源

2013-02-25 AlbatrossCafe

只要给它一个保证金：0汽车; – 2013-02-25 02:55:50

你为什么不简单地在HTML中包含一个'img'元素以及相应的属性？ – RobG 2013-02-25 03:07:14

我没有包含所有的脚本文件......其中有一些其他的逻辑，使显示从.js必需 – AlbatrossCafe 2013-02-25 03:27:49

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

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

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

来源

2013-02-25 02:59:01 slamborne

+1。 :-) – RobG 2013-02-25 03:04:26

添加行img.style.margin = "0 auto";应该做的伎俩。

来源

2013-02-25 02:57:25

您可以修改您的DIV与CSS样式的标签。

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

如果您正在修改的不止一种情况下，改变你的CSS（嵌入式或外部文件）

来源

2013-02-25 03:06:49

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

回答

相关问题