带有Bootstrap 3的垂直居中元素 [英] Vertically center element with Bootstrap 3

问题描述

我想垂直放置'design'标签和'21nov'标签.

 < div class ="row">< div class ="col-xs-6 col-xs-offset-1">< a href ="/job/52">< span class ="jobtitle"> designer</span></a>< span class ="companyname">@ Subiaco</span>< div class ="salary"> 90.000 $-100.000 $</div></div>< div class ="col-xs-3">< span class =标签标签成功"> design</span></div>< div class ="col-xs-2">11月21日</div></div> 

当前设计: -尽管您现在已经将其垂直对齐可能希望将样式应用于其他类，以免影响其他行元素.

I would like to vertically center 'design' label as well as '21nov'.

<div class="row">             
     <div class="col-xs-6 col-xs-offset-1">                
         <a href="/job/52"><span class="jobtitle">designer</span></a>
         <span class="companyname"> @Subiaco</span>
         <div class="salary">90.000$ - 100.000$</div>
     </div>
     <div class="col-xs-3">   
        <span class="label label-success">design</span>                         
     </div>                         
    <div class="col-xs-2">                   
      21 nov.
    </div>                 
</div>

Current design : http://jsfiddle.net/8FM3n/

---

Expected design:

Any hint ?

解决方案

Assuming it isn't dynamic content of varying heights, you can use line-height.

.row .col-xs-3, .row .col-xs-2 {
    line-height: 49px;
}

jsFiddle example - it's vertically aligned now, though you might want to apply the styling to a different class so it won't affect other row elements.

这篇关于带有Bootstrap 3的垂直居中元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！