引導中心內容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