内部容器围绕的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。添加了蓝色背景颜色，以便对中确认视觉。