如何在Javascript中水平居中放置多个相同的图像？

使用下面的代码，我试图将同一个图像打印19次，然后将这19个图像作为一个整体水平居中在页面上，但我似乎无法让它工作

var totImg = "large.png"; 

function prettyHeader(){
    function totoroImg(){
        var img = document.createElement("img");
        img.style.width = "30px";
        img.style.height = "30px";

        img.src=totImg;
        return img;
    }

    for(var totPrint=0; totPrint<20; totPrint++){
        document.body.appendChild(totoroImg());
    }
}

prettyHeader();

var totImg=“large.png”；
函数prettyHeader（）{
函数totoroImg（）{
var img=document.createElement（“img”）；
img.style.width=“30px”；
img.style.height=“30px”；
img.src=totImg；
返回img；
}
对于（var-totPrint=0；totPrint
var totImg=”https://placeimg.com/30/30/animals";
函数prettyHeader（）{
函数totoroImg（）{
var img=document.createElement（“img”）；
img.style.width=“30px”；
img.style.height=“30px”；
img.src=totImg；
返回img；
}
对于（var totPrint=0；totPrint我想知道css grid或flexbox是否对你有帮助？这里是一个fav。如果你不熟悉，请认真花时间做flexbox tut。这对布局非常有用，而且非常简单，正如视频中所解释的那样。@胡言乱语谢谢你，但我更想知道是否有办法在函数中查看这19幅图像在Javascript中创建一个整体并将其居中。如果HTML中文档的一部分是从图像开始的，而不是通过Javascript动态添加的，请考虑如何执行此操作。然后将相同的解决方案应用到动态添加的图像上。@misorude这是一个问题，我似乎不知道如何向该函数添加规则以创建你能解释我应该做什么吗？你能解释我应该做什么吗-我就是这么做的，不是吗？第1步：找到一个解决方案，用静态HTML/CSS示例，以你想要的方式显示以图像为中心的图像，此时不涉及任何脚本。一旦你做到了这一点，你就可以开始考虑如何让你的脚本动态生成相同的图像。添加这一新行似乎增加了一个巨大的w在页面中间的HITE方块中，19个图像偏移到右行，添加了100%行。您可能正在做一些错误的事。是的，非常感谢，我错误地把它添加到错误的行中。只有一个问题，就是每当我尝试添加任何其他的东西，比如另一个分离的图像或文本时，就把它放在同一个L上。作为这19个图像，我如何将它们分开？创建一个
div
作为容器，并将这些图像放在div中。你正在做的另一件事也是如此。但是你必须更改所有内容的样式。你真的需要看看flexbox。