合わせCSSコンテンツ

Question

私は次のパネルがあります。

をそして私が欲しいが、私のテーブルのtd内側に円チャートを集中し、それがモバイルになると、集中、それを維持することです。私はそれをしようとするいくつかの問題があります。これは私のコードです：

<div class="portlet-body row"> 
    <div class="col-lg-12"> 
     <h3 class="nome-rv"><i class="fa fa-user"></i> <?=$_SESSION['nomeCompleto']?></h3> 
    </div> 
    <div class="col-lg-4 col-sm-12"> 
     <table class="table table-bordered tabela-meta"> 
      <tbody> 
       <tr> 
        <td class="grafico-situacao"> 
         <div class="c100 p100 orange big"> 
          <span>100%</span> 
          <div class="slice"> 
           <div class="bar"></div> 
           <div class="fill"></div> 
          </div> 
         </div> 
        </td>      
       </tr> 
       <tr> 
        <td>PISO</td> 
       </tr> 
       <tr> 
        <td>3.500</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
    <div class="col-lg-4 col-sm-12"> 
     <table class="table table-bordered tabela-meta"> 
      <tbody> 
       <tr> 
        <td class="grafico-situacao"> 
         <div class="c100 p82 big"> 
          <span>82%</span> 
          <div class="slice"> 
           <div class="bar"></div> 
           <div class="fill"></div> 
          </div> 
         </div> 
        </td> 
       </tr> 
       <tr> 
        <td>META</td> 
       </tr> 
       <tr> 
        <td>3.500</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
    <div class="col-lg-4 col-sm-12"> 
     <table class="table table-bordered tabela-meta">       
      <tbody> 
       <tr> 
        <td class="grafico-situacao"> 
         <div class="c100 p63 green big"> 
          <span>63%</span> 
          <div class="slice"> 
           <div class="bar"></div> 
           <div class="fill"></div> 
          </div> 
         </div> 
        </td> 
       </tr> 
       <tr> 
        <td>SUPERMETA</td> 
       </tr> 
       <tr> 
        <td>3.500</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 

いくつかのクラスがありますが、私は今使っていません。 codepenへ

リンク：http://codepen.io/anon/pen/apNrxy

任意の提案？ありがとう！

Answer 1

フレックスボックスを利用できるのは簡単です（ブラウザの互換性hereを参照）。

あなたはブートストラップバージョン4を使用している場合は、あなただけでコンテンツをラップすることができます

<div class="d-flex justify-content-around">...</div> 

詳細についてはdocumentationを参照してください。あなたはブートストラップバージョン3を使用している場合

、あなたはまだ直接フレキシボックスのスタイルを使用することができます。

display: flex; 
justify-content: space-around; 

Answer 2

この

.c100 { 
    position: relative; 
    font-size: 120px; 
    width: 1em; 
    height: 1em; 
    border-radius: 50%; 
    /* float: left; */ 
    margin: 0 auto 0.1em auto; /* margin: 0 0.1em 0.1em 0; */ 
    background-color: #cccccc; 
}