垂直居中文本

Question

我這裏有一個的jsfiddle - http://jsfiddle.net/gomwyt2j/1/

超級簡單，我只需要垂直居中的文本，從而線與按鈕

沒有我嘗試似乎工作

<div class="container"> 

     <div class="row"> 
      <div class="col-sm-1"></div> 
      <div class="col-sm-3 text-center text"><p>Some Info</p></div> 
      <div class="col-sm-4 text-center text"><p>Some more Info Her</p></div> 
      <div class="col-sm-3 text-center btn-btn"><a class="btn">Read More</a></div> 
      <div class="col-sm-1"></div> 
     </div> 

     <div class="row"> 
      <div class="col-sm-1"></div> 
      <div class="col-sm-3 text-center text"><p>Some Info</p></div> 
      <div class="col-sm-4 text-center text"><p>Some more Info Her</p></div> 
      <div class="col-sm-3 text-center"><a class="btn">Read More</a></div> 
      <div class="col-sm-1"></div> 
     </div> 

    </div> 

Answer 1

一個可能的解決方案是使用line: height：

HTML

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-1"></div> 
     <div class="col-sm-3 text-center text"> 
      <p>Some Info</p> 
     </div> 
     <div class="col-sm-4 text-center text"> 
      <p>Some more Info Her</p> 
     </div> 
     <div class="col-sm-3 text-center btn-btn"><a class="btn">Read More</a> 
     </div> 
     <div class="col-sm-1"></div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-1"></div> 
     <div class="col-sm-3 text-center text"> 
      <p>Some Info</p> 
     </div> 
     <div class="col-sm-4 text-center text"> 
      <p>Some more Info Her</p> 
     </div> 
     <div class="col-sm-3 text-center"><a class="btn">Read More</a> 
     </div> 
     <div class="col-sm-1"></div> 
    </div> 
</div> 

CSS

.row { 
    background: gray; 
    color: white; 
    padding: 5px 0; 
    margin: 0 0 10px 0; 
} 
.text p { 
    display: inline-block; 
    //padding: 9px 0 0 0; 
    vertical-align: middle; 
} 
.btn-btn { 
} 
.btn { 
    background: red; 
    color: white; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    vertical-align: middle; 
} 
.col-sm-3, .col-sm-4 { 
    line-height: 35px; /*add line height*/ 
} 
p { 
    margin: 0;/*remove margin from p*/ 
} 

fiddle