Menu icon Foundation
Flex Grid - Vertically center .row

Hey guys, I've been coming across this problem for a while now and never been able to solve it in an elegant way.

What's the best way to vertically center .row? Please no transform or table-cell hacks. 

Example #1: I want .row and its columns to vertically center within .header (min-height 100px). When I apply "display: flex; align-items: center; justify-content: center;" to .header then .row shrinks its width so that's kind a bad solution. How to do this properly?

<style>
.header {
width: 100%;
float: left;
min-height: 100%;
}
</style>
<div class="header">
	<div class="row expanded align-middle">
		<div class="column">some text</div>
		<div class="column">another text</div>
	</div>
</div>

Example #2 and this is a very common one: Left columns is taller than the right one and I want .row to be vertically entered in the right column. What flexbox css do I use to achieve it? Again, when I use the mention align-items: center, the .row shrinks its width

<div class="row align-stretch">
   <div class="column">
      Left column has lots of text. Left column has lots of text. Left column has lots of text. Left column has lots of text. Left column has lots of text. Left column has lots of text. Left column has lots of text. Left column has lots of text. Left column has lots of text. Left column has lots of text. Left column has lots of text. Left column has lots of text. Left column has lots of text. Left column has lots of text. Left column has lots of text. Left column has lots of text. 
   </div>
   <div class="column">
      <div class="row"> /* How to center this row vertically? */
         <div class="column">
            Just a bit of text that is vertically centered
         </div>
      </div>
   </div>
</div>

 

foundation flex flexbox

Hey guys, I've been coming across this problem for a while now and never been able to solve it in an elegant way.

What's the best way to vertically center .row? Please no transform or table-cell hacks. 

Example #1: I want .row and its columns to vertically center within .header (min-height 100px). When I apply "display: flex; align-items: center; justify-content: center;" to .header then .row shrinks its width so that's kind a bad solution. How to do this properly?

<style>
.header {
width: 100%;
float: left;
min-height: 100%;
}
</style>
<div class="header">
	<div class="row expanded align-middle">
		<div class="column">some text</div>
		<div class="column">another text</div>
	</div>
</div>

Example #2 and this is a very common one: Left columns is taller than the right one and I want .row to be vertically entered in the right column. What flexbox css do I use to achieve it? Again, when I use the mention align-items: center, the .row shrinks its width

<div class="row align-stretch">
   <div class="column">
      Left column has lots of text. Left column has lots of text. Left column has lots of text. Left column has lots of text. Left column has lots of text. Left column has lots of text. Left column has lots of text. Left column has lots of text. Left column has lots of text. Left column has lots of text. Left column has lots of text. Left column has lots of text. Left column has lots of text. Left column has lots of text. Left column has lots of text. Left column has lots of text. 
   </div>
   <div class="column">
      <div class="row"> /* How to center this row vertically? */
         <div class="column">
            Just a bit of text that is vertically centered
         </div>
      </div>
   </div>
</div>

 

Rafi Benkual over 2 years ago
Adam over 2 years ago

Thanks but that doesn't solve centering nested rows within stretched column