Essayer d'aligner verticalement deux colonnes dans zurb foundation

Question

J'utilise Zurb Foundation avec Sass Compass, mais cela pourrait être un problème pour tout ce qui est en css.

Donc, j'ai un code comme celui-ci

<div class="row">
    <div class="small-6 column">...</div>
    <div class="small-6 column">...</div>
</div>

Les colonnes ont un contenu de hauteur différente, déterminé par la quantité de texte et d'images que je veux y mettre. La ligne n'a pas de hauteur explicite et est déterminée par la hauteur de la colonne la plus haute. La colonne la plus haute sera affichée telle quelle, mais j'aimerais que le contenu de l'autre colonne, qui est plus courte, soit centré verticalement. J'ai cherché un peu partout et j'ai essayé d'utiliser display : table et le positionnement relatif, mais aucune de ces méthodes ne répond à mes besoins.

Answer 1

Enveloppez le texte aligné verticalement dans un div de la même hauteur que son parent et display:table-cell (après avoir affiché son parent comme un tableau) :

HTML

    <div class="row">
        <div class="small-6 column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et iaculis justo. Mauris bibendum convallis est, vel blandit quam tempor aliquet. Cras euismod nibh et nisl congue, eget tincidunt mauris consectetur. Donec eu risus lectus. Integer at ipsum sed turpis fringilla adipiscing vitae vel enim.</div>
        <div class="small-6 column"><div class="v_align">Some text</div></div>
        <div class="clear"></div>
    </div>
<div style="width:200px; height:100px; background:#0f0; color:#fff;">dfbvd bdfhgf hfg hghf gfdh hfgghfd hgf</div>

CSS

.row{
    width:300px;
    height:auto;    
}
.clear{clear:both;}

.column:first-child{
    color:#f00;
    background:#ccc;
}
.column:nth-child(2){
    background:#999;
    color:#00f;
    display:table;
}
.column{
    width:150px;
    float:left;
}
.v_align{
    display:table-cell;
    vertical-align:middle;
}

JS

$(document).ready(function(){
    var rowHeight = $(".row").height();
    console.log(rowHeight);
    $(".column").height(rowHeight);
    $(".v_align").height(rowHeight);
});

Vérifiez le résultat : http://jsfiddle.net/gespinha/h6aPf/6/