如何使用css或js在垂直中心制作文本

时间:2018-03-22 13:16:46

标签: javascript css

<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>

所以我希望开始日期结束日期和邀请日期下的文本垂直居中我尝试了类似veritcal-align:middle,line-height padding-top之类的东西,但没有一个不起作用它调整了卡的大小我做了不需要那个。我想也许我可以用这样的javascript做点什么:

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

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

到目前为止,我可以看到每张卡的高度,但知道我不知道如何在这个js代码中添加verical align中间..对不起我是新编码也许我要求很多..:/

0 个答案:

没有答案