html5 - vertical alignment with filling in Zurb Foundation -


when use class vertical alignment, right div not high of left. fill black background in right div.

see picture below -

enter image description here

my code -

    <div class="row expanded align-middle">         <div class="small-12 medium-6 bg-verde" style="padding: 100px">             <h4 class="">                 morbi tristique senectus et netus et malesuada fames ac turpis egestas.                 nulla nec libero sit amet nulla efficitur bibendum vitae et purus.                 morbi tristique senectus et netus et malesuada fames ac turpis egestas.                 nulla nec libero sit amet nulla efficitur bibendum vitae et purus.             </h4>         </div>         <div class="small-12 medium-6 bg-black"  style="padding: 100px">             <h4 class="color-white">                 morbi tristique senectus et netus et malesuada fames ac turpis egestas.                 nulla nec libero sit amet nulla efficitur bibendum vitae et purus.             </h4>         </div>     </div> 

this happens due actual number of lines have in each h4. can correct using 2 techniques, using pure flex or using jquery library. personally, prefer jquery library due uncompatibilities of flex.

here helpful site can center in manner: http://howtocenterincss.com/

and here jquery library use: http://brm.io/jquery-match-height-demo/


Comments

Popular posts from this blog

inversion of control - Autofac named registration constructor injection -

verilog - Systemverilog dynamic casting issues -

ios - Change Storyboard View using Seague -