Question

我正在尝试动态创建三个图像的居中行。例如，如果我加载三个图像，我会有一行。如果四个图像，加载两行，如果十个图像，则四行。我的图像大小固定，围绕它们的容器div也是如此。

我最初的方法是将float：left应用于所有，这在某种程度上起作用。我有三行图像，当我使浏览器更瘦，一些图像移动到下一行，这就是我想要的。但是，图像没有居中，我也需要。

如果有人知道如何使用javascript和css这样做，那将非常有帮助。谢谢！

Answer 1

有几种方法可以做到这一点，但我认为最简单的方法是使图像显示内联块并删除所有边距和填充。您还需要使用font-size 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>

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

1 个答案: