幾個並排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的圖片display:block （正如我在上面的第二個演示中所做的那樣）然后使用margin:0 auto來使它們在父容器中水平居中。

Answer 2

您可以創建一個具有min-width和max-width以及text-align:center的容器。

Answer 3

使單個元素顯示：帶有文本對齊中心的內聯和容器元素...示例http://psarink.org/gallery.php