0

<br>
<div class="row margin-0">
 <div class="col-md-12">
  <div class="col-md-6">
   <label class="header-invite-list-labels">Invite description</label>
     </div>
     <div class="col-md-2">
   <label class="header-invite-list-labels">Start Date</label>
     </div>
     <div class="col-md-2">
   <label class="header-invite-list-labels">End Date</label>
     </div>
     <div class="col-md-2">
   <label class="header-invite-list-labels">Invitation date</label>
     </div>  
 </div>
</div>
<br>
<div class="row padding-bottom-10 margin-0">
 <div class="col-md-12 card-invite-list">
  <div class="col-md-6">
   <label class="description-invite-list">The legal and cultural expectations for date formats vary among populations. This page gives an overview of the Gregorian calendar date formats in general use by country.</label><br>
   <label class="users-groups-invited">22 users invited, 4 groups</label>
    </div>
    <div class="col-md-2 padding-right-0">
   <label class="description-invite-list">09 Mar 2018, 16:00</label>
    </div>
    <div class="col-md-2 padding-right-0">
   <label class="description-invite-list">09 Apr 2018, 16:00</label>
    </div>
    <div class="col-md-2 padding-right-0">
   <label class="description-invite-list">01 Mar 2018, 12:00</label>
    </div>
</div>
</div>
<div class="row padding-bottom-10 margin-0">
 <div class="col-md-12 card-invite-list">
  <div class="col-md-6">
   <label class="description-invite-list">Questions relating to the organizational and management
theories and practices.</label><br>
   <label class="users-groups-invited">22 users invited, 4 groups</label>
    </div>
    <div class="col-md-2 padding-right-0">
   <label class="description-invite-list">09 Mar 2018, 16:00</label>
    </div>
    <div class="col-md-2 padding-right-0">
   <label class="description-invite-list">09 Apr 2018, 16:00</label>
    </div>
    <div class="col-md-2 padding-right-0">
   <label class="description-invite-list">01 Mar 2018, 12:00</label>
    </div>
</div>
</div>
<div class="row padding-bottom-10 margin-0">
 <div class="col-md-12 card-invite-list">
  <div class="col-md-6">
   <label class="description-invite-list">Are you fit for GDPR?</label><br>
   <label class="users-groups-invited">22 users invited, 4 groups</label>
    </div>
    <div class="col-md-2 padding-right-0">
   <label class="description-invite-list">09 Mar 2018, 16:00</label>
    </div>
    <div class="col-md-2 padding-right-0">
   <label class="description-invite-list">09 Apr 2018, 16:00</label>
    </div>
    <div class="col-md-2 padding-right-0">
   <label class="description-invite-list">01 Mar 2018, 12:00</label>
    </div>
</div>
</div>

So I want the text under Start date end date and invitation date to be on center vertically I tried things like veritcal-align: middle, line-height padding-top, but none does not work it resizes the card and I do not need that. I thought maybe I can do something with javascript like this:

$(document).ready(function(){ 
       $( ".card-invite-list" ).each(function() {
         var cards_height = $(this).height(); 

         console.log(cards_height);
        });
    });

So far I can see the height of each card, but know I dont know how to add the verical align middle inside this js code.. Sorry I am new on coding maybe I am asking to much.. :/

Lola
  • 1
  • You're not asking too much, but you have done too little research. –  Mar 22 '18 at 13:18
  • there's a fair number of potential answers for this -- you can try flex layouts https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ ; you can try adding a padding-top or margin-top to your elements (which you can couple with JS to programmatically find); you can use tables with vertical alignment ... and probably many many more :) – Doug Mar 22 '18 at 13:21

0 Answers0