如何实现td中的多个img元素自动换行，且水平、垂直居中？

[luquansen]

通过JS向固定宽度和高度的单元格中，插入了不定数量的img元素（宽度未知，高度已知），怎么样才能让这些img自动换行的同时又能水平、垂直居中呢？

[___紫菜]

    .div_img {
            width:600px;height:600px;border:1px black solid;overflow: auto;
        }
            .div_img img {
                display: block;
                margin: 10px auto;
                width:100px;
                height:100px;
            }

<div class="div_img">
        <img/>
        <img /><img /><img /><img /><img /><img /><img /><img /><img /><img /><img /><img /><img /><img /><img /><img />
    </div>

[___紫菜]

想象不出来你描述的效果！很多个img在一个div里 水平 垂直居中？

[luquansen]

引用 1 楼 u013116426 的回复:

想象不出来你描述的效果！很多个img在一个div里 水平 垂直居中？

大概1～5个吧，主要是能自动换行+水平居中

[luquansen]

引用 3 楼 u013116426 的回复:

    .div_img {
            width:600px;height:600px;border:1px black solid;overflow: auto;
        }
            .div_img img {
                display: block;
                margin: 10px auto;
                width:100px;
                height:100px;
            }

<div class="div_img">
        <img/>
        <img /><img /><img /><img /><img /><img /><img /><img /><img /><img /><img /><img /><img /><img /><img /><img />
    </div>

这样的话就是每一个img都一样宽，我的难点就在每一个img的宽度都不知道，有的宽，有的窄，怎么搞？

[Devin.qu]

img { display:block; }

[zpjshiwo77]

<div>
      <img/>
     <img/>
</div>

div{
     width:100px;
     height:auto;
     margin: 0 auto;
     text-align: center;
}

只要img不小于div元素宽度的一半，应该能达到你的效果。

[luquansen]

原来是IE默认文档模式是IE7，增加如下代码换成IE9

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />

然后通过

display: inline;

把img改成行内元素，父元素增加

text-align: center;
vertical-align: middle;

自动就可以换行+水平、垂直居中了。