几个并排 div 的 CSS/HTML 居中

Question

我正在创建一个网站，需要将几个文本 block 和图片并排放置。但我也希望它们居中。我为这些元素中的每一个都使用了一个设置大小，所以如果有人调整他们的屏幕大小，我希望我的页面不断改变彼此相邻放置的 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使它们在父容器内水平居中。