如何使用javascript显示在身体中心对齐的多个图像答案

【问题标题】：How to show multiple images that are aligned in the center of the body using javascript如何使用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 的回答有效

标签： javascript html css image

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

【讨论】：