引导中心内容horizo​​ntaly和推/拉内容

Question

我这里有一个的jsfiddle：http://jsfiddle.net/hnfdf9y1/1/

它两行与每个包含该垂直居中文本2个细胞。

我需要居中白圈与文本horizo​​ntaly所以它的中心在它的阻止

这是重要espically当白色圆圈是文本上方和块是100％。

我还需要推或拉第二行，所以当它打破100％时，白圈在文本上方，而不是像现在这样。

 <div class="container"> 

      <div class="row"> 
       <div class="block clearfix"> 

        <div class="col-sm-4 col-lg-3 col"> 
         <div class="circle"> 
          <p class="extract extract_percent">50%</p> 
          <p class="extract extract_fact">Some Text</p> 
         </div> 
        </div> 

        <div class="col-sm-8 col-lg-9 col"> 
         <div class="text"> 
         <p class="fact">More text More text More text More text More text More text More text More text </p> 
         </div>  
        </div> 


        <div class="col-sm-8 col-lg-9 col"> 
         <div class="text"> 
         <p class="fact">More text More text More text More text More text More text More text More text </p> 
         </div>  
        </div> 

     <div class="col-sm-4 col-lg-3 col"> 


     body{ 
      background: blue; 
     } 

     .col{ 
      border: 1px solid red; 
     } 

     .block{ 
      display: table; 
      height: 120px; 
     } 

     .block .circle{ 
      background: white; 
      border-radius: 140px; 
      display: table-cell; 
      vertical-align: middle; 
      height: 140px; 
      text-align: center; 
      width: 140px; 
     } 
     .extract{ 
      color: $at-blue-dark; 
      margin: 0; 
     } 

     .extract_percent{ 
      font-size: 2em; 
      font-weight: bold; 
     } 

     .extract_fact{ 
      font-size: 1.1em; 
     } 

     .text{ 
      display: table-cell; 
      vertical-align: middle; 
      height: 140px; 
     } 

     .fact{ 
      color: white; 
     } 

Answer 1

Wrapp cirle类新的元素类CSS类

.center-circle { 
display:table; 
} 

<div class="center-circle"> 
    <div class="circle"> 
        <p class="extract extract_percent">50%</p> 
        <p class="extract extract_fact">Some Text</p> 
    </div> 
</div> 

Answer 2

更改类.block .circle到：

.block .circle { 
    background: white; 
    border-radius: 140px; 
    /*display: table-cell; 
    vertical-align: middle;*/ 
    height: 140px; 
    text-align: center; 
    width: 140px; 
    margin: 0 auto; 
} 

并添加padding-top: 35px;到.extract_percent或所需填充：

.extract_percent{ 
    font-size: 2em; 
    font-weight: bold; 
    padding-top: 35px; 
} 

Working Example

更新

要更改您的例子在100％宽度的位置，你必须做到以下几点：

更改最后两名.col div的顺序。将.col-sm-push-8添加到第一个，并将.col-sm-pull-4添加到最后。就像这样：

  <div class="col-sm-4 col-lg-3 col col-sm-push-8 col-lg-push-9"> 
      <div class="circle"> 
       <p class="extract extract_percent">50%</p> 
       <p class="extract extract_fact">Some Text</p> 
      </div> 
     </div> 

     <div class="col-sm-8 col-lg-9 col col-sm-pull-4 col-lg-pull-3"> 
      <div class="text"> 
      <p class="fact">More text More text More text More text More text More text More text More text </p> 
      </div>  
     </div> 

你必须改变div的顺序，因为引导是移动第一，因此，你必须使用HTML和“宽”的布局，让您的“小”布局首先被控制由公用事业类，如.col-xx-push-xx。

Working Example