用CSS在两个行内块元素之间插入换行符

Question

我想知道如何在这些元素之间引入一个换行符，以便在小提琴here中使用div元素。

这里的挑战是元素需要居中，但也需要能够强制换行。如果我使用浮动，我可以控制线断行：

.article:after { 
    content: '\A'; 
    white-space: pre; 
} 

但是，显然，元素不再居中了。

这是一个link直对小提琴。

编辑：我更新了一个新的小提琴，以澄清需要display: inline-block，悬停在其中一个图像看到覆盖图像定位在图像上。

<div id="posts"> 
    <div class="article"> 
    <div class="inner"> 
     <div class="overlay"> 
     </div> 
     <div class="content photo"> 
     <img style="max-width: 45vw;" src="http://dummyimage.com/600x400/000/fff"> 
     </div> 
    </div> 
    </div> 

    <div class="article"> 
    <div class="inner"> 
     <div class="overlay"> 
     </div> 
     <div class="content photo"> 
     <img style="max-width: 38vw;" src="http://dummyimage.com/600x400/ff0000/fff"> 
     </div> 
    </div> 
    </div>   
</div> 

#posts { 
    text-align:center; 
} 

.article { 
    margin: 10px; 
    position: relative; 
    float: none; 
    display: inline-block; 
    vertical-align: bottom; 
} 

.article:after { 
    content: '\A'; 
    white-space: pre; 
} 

.article .inner { 
    position: relative; 
    width: 100%; 
    height: 100%; 

    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-box-orient: vertical; 
    -moz-box-orient: vertical; 
    -webkit-box-direction: reverse; 
    -moz-box-direction: reverse; 
    -webkit-flex-direction: column-reverse; 
    -ms-flex-direction: column-reverse; 
    flex-direction: column-reverse; 
} 

.article .overlay { 
    height: 101%; 
    width: 101%; 
    margin: 0 0 -25px; 
    position: absolute; 
    top: -1px; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    overflow: hidden; 
    background-color: rgba(0,0,0,0); 
    -webkit-transition: background-color .3s ease-out; 
    -moz-transition: background-color .3s ease-out; 
    -o-transition: background-color .3s ease-out; 
    transition: background-color .3s ease-out; 
} 

.content { 
    position: relative; 
} 

img { 
    max-width: 100%; 
} 

Answer 1

使他们block元素，而不是inline-block将打破行，并让他们为中心：

http://fiddle.jshell.net/z94bzm4n/5/

.article { 
    margin: 10px; 
    position: relative; 
    float: none; 
    display: block; 
    vertical-align: bottom; 
} 

这是因为该.article div继承父div的text-align: center。由于图像是内嵌元件，它会导致它们被居中...

EDIT

另一种解决方案，保持inline-block属性是使用word-spacing增加元件之间的间隙（因为他们是内联）在父母身上。与视口单元（例如VW）设置将完全打破要素：

http://fiddle.jshell.net/z94bzm4n/7/

#posts { 
    text-align: center; 
    word-spacing: 100vw; 
}