Struggling to find a way to add a line break between two div elements in this fiddle here.
The issue is that I want the elements centered and also have control over line breaks. Using float allows for line breaks with:
.article:after {
content: '\A';
white-space: pre;
}
However, this disrupts centering of elements.
Direct link to the fiddle can be found here.
UPDATE: Updated fiddle highlights the necessity of using display: inline-block. Hover over images to see overlay positioned correctly.
<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%;
}