Estou fazendo um trecho de código onde há 3 "columns" dentro de uma "row" do foundation 5 conforme código abaixo:
.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>
O que está acontecendo é que não consigo alinhar essas colunas verticalmente. Já atribui o "vertical-align:middle
" tanto na "row" quanto nas "columns" e não funcionou, também já coloquei um tamanho fixo para "row" e deixei as "columns" com "height" 100% e também não funcionou.
Alguma idéia para alinhar vertical?
Código no JSFiddle: Aqui