Web Standards: HTML & CSS
|
<style> |
|
.article { |
|
overflow: hidden; |
|
display: -webkit-flex; |
|
display: flex; |
|
width: 800px; |
|
margin: 0 auto; |
|
align-items: center; |
|
} |
|
</style> |
|
<div class="pageItems"> |
|
<div class="pageContent">Content 1</div> |
|
<div class="pageSide">Content 2</div> |
|
</div> |
|
<article id="comment-1" class="comment featured">Comment</article> |
|
<article id="comment-2" class="comment">Comment</article> |
|
<style> |
|
.row { |
|
overflow: hidden; |
|
} |
|
.flex { |
|
display: -webkit-flex; |
|
display: flex; |
|
} |
|
.center-block { |
|
width: 800px; |
|
margin: 0 auto; |
|
} |
|
.flex-center { |
|
align-items: center; |
|
} |
|
</style> |
|
<div class="row flex center-block flex-center"> |
|
<div class="col-md-8">Content 1</div> |
|
<div class="col-md-4">Content 2</div> |
|
</div> |