html中如何多个div并排居中排列？

Question

要求是页面宽度不固定（为百分比）
容器内的div宽度固定为200px，希望让这些div并排排列（当页面缩小），且是居中
<div>
<div> <img src="1.png" height=200px width=200px> </div>
<div> <img src="1.png" height=200px width=200px> </div>
<div> <img src="1.png" height=200px width=200px> </div>
<div> <img src="1.png" height=200px width=200px> </div>
<div> <img src="1.png" height=200px width=200px> </div>
<div> <img src="1.png" height=200px width=200px> </div>
</div>
如图，出现的多张图片，并排（看页面的大小能排列几张，多的下一排）排列在页面中央。

Answer 1

改一下代码，假设是这样

<div id="testContainer">
<div><img src="1.png"></div>
<div><img src="1.png"></div>
<div><img src="1.png"></div>
<div><img src="1.png"></div>
<div><img src="1.png"></div>
<div><img src="1.png"></div>
<div><img src="1.png"></div>
<div><img src="1.png"></div>
</div>

CSS:
#testContainer {
text-align: center;
}
#testContainer > div {
display: inline-block;
}
#testContainer img {
width: 200px;
height: 200px;
}

其实楼上有个朋友说得对，把 img 外面的 div 去掉默认就是行内并排的，除非你 div 还要做其他互动

Answer 2

并排的话，
1、可以把div float：left ; width：16%;overflow:hidden
2、可以把div display：inline-block ; width：16%;overflow:hidden

追问

不行，我说过啊，div的大小是固定的。宽高200px
让div适应页面，能摆几个，摆不下下一行，这些我都做到了，但是不能做到让一行的div居中

追答

这样，你只能分分辨率的去写css了 像这样
@media screen and (max-width: 600px) {

}

或者你直接引用bootstrap

Answer 3

不用div不行吗？
<div style="width:100%; text-align:center;">
<img src="1.png" height=200px width=200px>
<img src="1.png" height=200px width=200px>
<img src="1.png" height=200px width=200px>
<img src="1.png" height=200px width=200px>
<img src="1.png" height=200px width=200px>
<img src="1.png" height=200px width=200px>
<img src="1.png" height=200px width=200px>
<img src="1.png" height=200px width=200px>
<img src="1.png" height=200px width=200px>
<img src="1.png" height=200px width=200px>
</div>

直接这样不可以吗？不就可以省去了很多的麻烦？？

Answer 4

看你这样的描述，感觉你是想做一个瀑布流的效果，直接给你个现成的瀑布流插件吧，你用下看怎么样。

追问

你这个有点意思。我是初学者。只是想知道怎么写。。。

追答

这个可以直接拿来用，把需要替换的文字和图片替换就好了，js不用修改，只要改div就好了

本回答被提问者采纳