2014-09-29 36 views
0

我對這個標籤有些麻煩,它似乎不想保持垂直居中,它總是在頂部,如果任何人都可以提供幫助,那就太棒了,謝謝您。標籤不會保持垂直中心,引導

http://jsfiddle.net/tu7moprn/

<div class="container"> 
    <div class="row"> 
     <div class="col-md-4"> 
      <div class="innertext">Text Test Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</div><span class="label label-default pull-right">New</span> 
     </div> 
     <div class="col-md-4">Text</div> 
     <div class="col-md-4">Text</div> 
    </div> 
</div> 
@import url('http://getbootstrap.com/dist/css/bootstrap.min.css'); 
h4 { 
    margin-top: 25px; 
} 
.row { 
    margin-bottom: 20px; 
} 
.row .row { 
    margin-top: 10px; 
    margin-bottom: 0; 
} 
[class*="col-"] { 
    padding-top: 15px; 
    padding-bottom: 15px; 
    background-color: #eee; 
    background-color: rgba(86, 61, 124, .15); 
    border: 1px solid #ddd; 
    border: 1px solid rgba(86, 61, 124, .2); 
} 
hr { 
    margin-top: 40px; 
    margin-bottom: 40px; 
} 
.innertext { 
    display:inline-block; 
    width:90% 
} 
+1

你要垂直居中,整個容器什麼你撥弄的工作叉? – 2014-09-29 19:26:48

+0

@caeth標籤上寫着「新」 – ToCode 2014-09-29 19:28:02

+0

但你需要新的總是在正確的? – DaniP 2014-09-29 19:37:26

回答

0

您可以從標籤刪除類pull-right,然後添加此proeprties:

.label { 
    display:inline-block; 
    vertical-align:middle; 
} 
.innertext { 
    vertical-align:middle; 
} 

入住這Demo Fiddle

+0

完美,謝謝。 – ToCode 2014-09-29 19:57:50

0

你可以總是通過加上position: absolute;top: 50%;margin-top: -x;(記住減號)來覆蓋,其中x是標籤高度的一半。它會使你的標籤垂直居中。不要忘記將position: relative;設置爲該span元素的父級。它將始終停留在父div的中間。

如果這是你想要的。否則提供更多細節。

這裏是http://jsfiddle.net/r0gsewtd/