1
I’m making a code snippet where there are 3 "Columns" inside a "Row" of Foundation 5 as code below:
.row{
background-color:yellow;
}
.align-vertical{
align-vertical:middle;
}
<div class="row align-vertical">
<div class="small-4 columns">
<p>
teste
<br>
teste
</p>
</div>
<div class="small-4 columns">
<p>
Teste
</p>
</div>
<div class="small-4 columns">
<p>
Teste
</p>
</div>
</div>
What’s happening is that I can’t align these columns vertically. It already assigns the "vertical-align:middle
" both in "Row" and "Columns" and it didn’t work, I also put a fixed size for "Row" and left the "Columns" with "height" 100% and also didn’t work.
Any idea for vertical alignment?
Code in the Jsfiddle: Here
It worked! thanks @andrepaulo ... I just made a small change in CSS to lose those attributes on screen less than 640px if it wasn’t wrong for the Foundation grids:
@media only screen and (min-width: 640px) {
 .align-vertical{
 display: -webkit-flex; /* Safari */
 -webkit-align-items: center; /* Safari 7.0+ */
 display: flex;
 align-items: center;
 }}
– Bruno Folle