內部容器圍繞的div當容器內聯塊不工作

Question

我用了搜索功能，發現很多人建議把.container有display:inline-block，然後給.box一個margin:0 auto;

事情是這樣的：

.container { 
position:relative; 
display:inline-block; 
width:100%; 
margin:5rem auto; 
padding:0; 
} 

.box { 
position:relative; 
display:block; 
width:20%; 
height:auto; 
vertical-align:top; 
margin:0 auto; 
padding:0 1rem 1rem 1rem; 
border:1px solid #ccc; 
} 

這裏有一個小提琴在那裏將集中和發送的每個div下面的下一個 http://jsfiddle.net/ayezee33/3hk12c8g/

這裏是我加入提琴到.box類。我怎麼能把它看起來像這樣？ http://jsfiddle.net/ayezee33/7qdhjtrp/

本質上，我試圖在屏幕寬度100％的中間居中這些3個div，分別叫做.box。我希望文本仍然左對齊，但框本身要居中。我錯過了什麼？

Answer 1

你和你的第一個例子非常接近。

通過應用inline-block的風格，你現在基本上正在處理一些像文本元素那樣相互作用的東西。因此，以div爲中心的方式是將text-align:center應用於父母div。 （在這種情況下爲.container）。然後在兒童div s上覆蓋此樣式。

DEMO

PS。添加了藍色背景顏色，以便對中確認視覺。