当容器上的内联块不起作用时，在容器内居中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发送到下一个inline-block下方 http://jsfiddle.net/ayezee33/3hk12c8g/

这是我向.box课程添加.box的小提琴。我怎么能把它看起来像这样？ http://jsfiddle.net/ayezee33/7qdhjtrp/

基本上我试图将这3个名为{{1}}的div放在屏幕宽度的100％中间。我希望文本仍然左对齐，但框本身要居中。我错过了什么？

Answer 1

你和第一个例子非常接近。

通过应用样式inline-block，您现在基本上处理的事情与文本元素类似。因此，将div居中的方法是将text-align:center应用于父div。 （在这种情况下.container）。然后在子div上覆盖此样式。

<强> DEMO

PS。添加了蓝色背景颜色，以便对中心进行视觉确认。