2014-11-08 6 views
-1

У меня есть 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> 

ответ

0

Одним из возможных решений является использование 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

Смежные вопросы