Javascript 如何动态创建三个图像的中心行？_Javascript_Css

Javascript 如何动态创建三个图像的中心行？

javascript css

Javascript 如何动态创建三个图像的中心行？,javascript,css,Javascript,Css,我试图动态创建三个图像的中心行。例如，如果我加载三个图像，我将有一行。如果有四个图像，则加载两行，如果有十个图像，则加载四行。我的图像是固定大小的，包围它们的容器div也是固定大小的我最初的方法是应用float:left-to-all，这在一定程度上起了作用。我有三行图像，当我使浏览器更瘦时，一些图像移到下一行，这就是我想要的。但是，图像没有居中，这也是我需要的如果有人知道如何使用javascript和css实现这一点，那将非常有用。谢谢大家! 有几种方法可以做到这一点，但我认为最简单的方法

我试图动态创建三个图像的中心行。例如，如果我加载三个图像，我将有一行。如果有四个图像，则加载两行，如果有十个图像，则加载四行。我的图像是固定大小的，包围它们的容器div也是固定大小的

我最初的方法是应用float:left-to-all，这在一定程度上起了作用。我有三行图像，当我使浏览器更瘦时，一些图像移到下一行，这就是我想要的。但是，图像没有居中，这也是我需要的

如果有人知道如何使用javascript和css实现这一点，那将非常有用。谢谢大家!

有几种方法可以做到这一点，但我认为最简单的方法是让图像显示inline block并删除所有的边距和填充。您还需要使用字体大小0来消除图像之间的空白

<html>
    <head>
        <style>
            .rowimg {
                display:inline-block;
                /* by default, there should be no padding/margin, but remove them just in case*/
                margin:0;
                padding:0;
                vertical-align:middle; /* important if the images are different sizes*/
            }
            #imgcontainer {
                font-size:0; /* gets rid of the spaces in between images */
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div id="imgcontainer">
            <img src="..." class="rowimg">
            <img src="..." class="rowimg">
            <img src="..." class="rowimg">
            <img src="..." class="rowimg">
            <img src="..." class="rowimg">
            <img src="..." class="rowimg">
        </div>
    </body>
</html>