几个并排div的CSS/HTML居中

Question

我正在创建一个网站,需要将几块文本和图片放在一起.但我也希望他们能够集中精力.我正在为每个元素使用一个设置大小,所以如果有人调整屏幕大小,我希望我的页面不断更改彼此相邻的div数.通常我会使用float:left; 为此,但这不会起作用,因为我希望我的页面集中在中间.

所以看起来有点像这样:

________
|1 2 3 4| 
|  5 6  |
|_______|

但是当我调整屏幕大小时,它看起来像这样:

______
|1 2 3|
|4 5 6|
|_____| 

如果我放大,它看起来像这样:

___________
|1 2 3 4 5 |
|    6     |
|__________|

目前css看起来像这样:

 div.child{
width:23%;
float:left;
height:600px;
padding:0px;
min-width:200px;
max-width:230px;
overflow:hidden;
text-align:center;
border-style:solid;
border-width:5px;
overflow:visible;
display:inline-block;
}

和

div.parrent{
padding:0px;
border-style:solid;
border-top-style:solid;
border-width:5px;
overflow:hidden;
text-align:center;
}

有人有任何提示吗？

Answer 1

全部制作display:inline-block并设置父级text-align:center.

演示1:http://jsfiddle.net/xdEmz/1/

演示2:http://jsfiddle.net/E5sHa/2/

请注意,如果您希望每个项目中的图片居中,您可以:

• 将图像保留为display:inline(默认值)并让它text-align:center从父级流出,并使用显式<br>强制包装它们,或者
• 您可以将图片设置为display:block(正如我在上面的第二个演示中所做的那样),然后使用margin:0 auto它们在父容器中水平居中.