如何使用javascript显示在身体中心对齐的多个图像
Posted
技术标签:
【中文标题】如何使用javascript显示在身体中心对齐的多个图像【英文标题】：How to show multiple images that are aligned in the center of the body using javascript 【发布时间】：2014-09-20 22:54:13 【问题描述】：我有一个 javascript 函数可以检测用户中的浏览器，现在我希望能够在我的 html 文档中附加与所使用的浏览器类型相对应的图像。 IE。如果我使用 chrome 我想显示 img1 img2 img3 并将它们全部对齐在身体的中心，如果我使用 firefox 则只显示 img4 img 5 img 6 等等。我可以显示一张图像，但是即使我的身体设置为居中对齐，图像也会左对齐。
据我了解，您可以使用
var img = document.createElement("img");
img.src = src;
document.body.appendChild(img);
这会将图像附加到您的身体上。
所以我的 HTML 或多或少如下。
<html>
<body align="center">
<div id='container' ></div>
<script>
function waitForWhichBrowser(cb)
var callback = cb;
function wait()
if (typeof WhichBrowser == 'undefined')
window.setTimeout(wait, 100)
else
callback();
wait();
waitForWhichBrowser(function()
var o = document.getElementById('container');
try
//Catches the browser metadata -- Name,Version Num,Platform
Browsers = new WhichBrowser(
useFeatures: true,
detectCamouflage: true
);
var str = Browsers + " ";
var res = str.split(" ",1); //Parse string from WhichBroswer function to isolate browser name
//o.innerHTML = ' ' + res;
if(res == 'Chrome')
var img = document.createElement("img");
var img2 = document.createElement("img2");
var img3 = document.createElement("img3");
img.src = "images/img1.png";
img2.src = "images/img2.png";
img3.src = "images/img3.png";
document.body.appendChild(img);
document.body.appendChild(img2);
document.body.appendChild(img3);
if(res == 'Firefox')
var img4 = document.createElement("img4");
var img5 = document.createElement("img5");
var img6 = document.createElement("img6");
img4.src = "images/img4.png";
img5.src = "images/img5.png";
img6.src = "images/img6.png";
document.body.appendChild(img4);
document.body.appendChild(img5);
document.body.appendChild(img6);
if(res == 'Internet')
//Do the same for internet explorer with img7 img8 img9
//Else clause
if(res != 'Chrome' && res!='Firefox' && res!='Internet')
window.location.href = "WindowsChromeDownload.htm"; //Instead of making a separate default download page for an unspecified browser I linked the else case to the chrome landing page since it's the most common browser
//When this statement was left in all browsers would redirect to the else case
//else
//window.location.href = "WindowsDefaultDownload.htm";
//
catch (e)
o.innerHTML = 'Error';
);
</script>
</body>
</html>
所以我的问题是， 我怎样才能让我的所有图像对齐中心？ 是否可以将图像添加到我体内的容器而不是身体本身。例如
<html>
<body>
<script>
//Location where it detects browser and appends images
</script>
<div id='display'>
<!-- Display images from javascript here -->
</div>
</body>
</html>
【问题讨论】：
您希望将图像添加到 并居中？ 是的，但是@webkit 的回答有效 【参考方案1】：要添加图片并使其居中#display div，请执行以下操作：
首先在你的 js..
var display = document.getElementById('display');
然后将您的 body.append() 替换为：
display.appendChild(img)
然后在你的 css 中添加：
#display text-align:center;
额外的顺便说一句：
如果你想让你的脚本更有效率和可读性，你可以像这样重写你的函数：
waitForWhichBrowser(function()
var o = document.getElementById('container');
var imgsrc = [];
var display = document.getElementById('display');
try
//Catches the browser metadata -- Name,Version Num,Platform
Browsers = new WhichBrowser(
useFeatures: true,
detectCamouflage: true
);
var str = Browsers + " ";
var res = str.split(" ", 1); //Parse string from WhichBroswer function to isolate browser name
if (res == 'Chrome') imgsrc = ["images/img.png", "images/img2.png", "images/img3.png"];
if (res == 'Firefox') imgsrc = ["images/img4.png", "images/img5.png", "images/img6.png"];
if(res == 'Internet') imgsrc = ["images/img7.png", "images/img8.png", "images/img9.png"];
//Else clause
if(res != 'Chrome' && res!='Firefox' && res!='Internet')
window.location.href = "WindowsChromeDownload.htm"; //Instead of making a separate default download page for an unspecified browser I linked the else case to the chrome landing page since it's the most common browser
for (var i = 0; i < imgsrc.length; i++)
var img = document.createElement("img");
img.src = imgsrc[i];
display.appendChild(img);
//When this statement was left in all browsers would redirect to the else case
//else
//window.location.href = "WindowsDefaultDownload.htm";
//
catch (e)
o.innerHTML = 'Error';
);
【讨论】：
太棒了！感谢您的帮助。 当然，我已经根据您的脚本的建议编辑了我的答案，请注意我将图像源添加到数组中，然后根据浏览器迭代正确的数组.. 祝你好运:) 我看到了！谢谢。它确实使代码看起来更干净。 似乎图像没有使用最新代码附加到显示 div。我在原始帖子中更新了我的代码。知道为什么吗？【参考方案2】：只需将容器文本对齐到中心：
http://jsbin.com/notocube/1/edit?html,output
【讨论】：
以上是关于如何使用javascript显示在身体中心对齐的多个图像的主要内容，如果未能解决你的问题，请参考以下文章
如何在 PagedGridView 中水平对齐中心的加载图标？